如何使用angular JS创建下拉重定向页面

时间:2015-02-26 17:52:33

标签: html angularjs

我想在angular JS中创建一个下拉重定向页面。当用户选择下拉菜单然后单击“执行”按钮时,他将被定向到该页面。

下面是angularJS脚本,带有一些Javescript和Html页面。

//Angular JS
function TheController($scope) {

    $scope.locations = [
        {LocationId : "http://www.google.com/", LocationName : 'Philippines' },       
        {LocationId : " http://www.yahoo.com/" , LocationName : 'Canada' },
        {LocationId : " http://www.bing.com/", LocationName : 'China' } ];

    function goToNewPage(dropdownlist)
 {
 var url = dropdownlist.options(dropdownlist.selectedIndex).value;
 if (url != "")
 {
 window.open(url);
 }
 }

 }

//Html
<form name="dropdown">

<div ng-controller="TheController" ng-app>


Another Location:    
<select ng-model="anotherLocationId" onchange="goToPage(this.options(this.selectedIndex).value)" >
    <option ng-repeat="location in locations" value="{{location.LocationId}}">{{location.LocationName}}</option>
</select>    

    <hr/>


    Another Location: {{anotherLocationId}}


</div>

<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
    </form>

1 个答案:

答案 0 :(得分:0)

你的代码看起来会起作用但是会打开一个新窗口而不是重定向。来自Here您需要做的是替换

window.open 

window.location.href = $scope.anotherLocationId;

我对角度相当新,但我的理解是下拉列表中的选定项目将被放入ng-model变量中。 window.location将重定向而不是打开一个新窗口。