Question

我正在构建一个AngularJS应用程序（1.4），现在我正在使用下拉菜单选择不同的页面。

问题在于，当我在菜单中选择一个页面并转到该页面时，我希望在下拉菜单中自动选择页面名称，但这不会发生。

以下是代码：

{'En': {'id': '3838', 'code': 'T21', 'name': 'En'}, 'Tim': {'id': '0001', 'code': 'K05', 'name': 'Tim'}, 'Jan': {'id': '0002', 'code': 'K5', 'name': 'Jan'}, 'aps': {'id': '3804', 'code': 'T22', 'name': 'aps'}, 'John': {'id': '3825', 'code': 'T08', 'name': 'John'}, 'Jyke': {'id': '3957', 'code': 'T11', 'name': 'Jyke'}, 'Brad': {'id': '0001', 'code': 'T2Y', 'name': 'Brad'}}

JS代码：

<select ng-options="menu_voice.name for menu_voice in menu_voices track by menu_voice.url" ng-model='selectedOption' ng-change="changeLink()">
</select>

最后，因为我使用angular-ui-router并且所有这些页面都是嵌套视图，所以在嵌套视图的每个控制器中我都有这行代码：

$scope.changeLink = function(){
    $state.go($scope.selectedOption.url);
};

$scope.menu_voices = [
    {
        "url": 'account.company',
        "name": 'Company'
    },
    {
        "url": 'account.billing',
        "name": 'Billing'
    }
    ...
];

其中x是我想要选择的菜单语音编号。

我可以更改页面，但每次在下拉菜单中，所选语音都是空白的。我错过了什么？

Answer 1

我对原来的答案进行了一些小修改，因为我无法使用＆＃34;跟踪＆＃34;使用angularjs v1.4的子句。

HTML：// url现在是值，name是选择选项的标签

<select ng-options="menu_voice.url as menu_voice.name for menu_voice in menu_voices" ng-model="selectedOption">

控制器：

预选您要分配的选项＆＃34; selectedOption＆＃34;网址。

$scope.selectedOption = $scope.menu_voices[x].url;

现在，对于更改链接，您可以执行以下两项操作之一

$scope.changeLink = function(){
    $state.go($scope.selectedOption);
};

OR

$scope.changeLink = function(url){
    $state.go(url);
};

加上这个：

<select ng-change="changeLink(selectedOption)" ...>

here is a working example使用angularjs v1.4

Here is a reference link提出了类似的问题，可以帮助您了解此处发生的事情。

使用AngularJS自动选择正确的选项元素

1 个答案: