javascript - AngularJS根据url选择默认选项

Question

我有一个下拉菜单，其中包含页面各个部分的一些链接。该应用程序是用 AngularJS 版本 1.4 编写的，下拉菜单确实有效，但是当我直接通过下拉菜单中的 url 进入页面时，总是选择空语音而不是正确的语音。这是代码:

HTML

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

JS:

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

$scope.menu_voices = [
    {
        "url": 'account.company',
        "name": 'Company'
    },
    {
        "url": 'account.billing',
        "name": 'Billing'
    },
    {
        "url": 'account.password',
        "name": 'Password'
    },
    {
        "url": 'account.design',
        "name": 'Design'
    },
    {
        "url": 'account.social',
        "name": 'Social'
    },
    {
        "url": 'account.notifications',
        "name": 'Notifications'
    }
];

如果我在下拉菜单中选择一个语音，我会转到正确的链接并选择正确的语音。但如果在网址栏中我输入类似以下内容:

www.myapp.com/account/billing

我转到正确的页面，但在下拉菜单中所选的语音为空。

我该如何解决这个问题？

第一次回复后编辑:

我添加了这个:

var name = $window.location.pathname;
name = name.substring(9);
name = name.charAt(0).toUpperCase() + name.slice(1);

var url = $window.location.pathname.substring(1).replace(/\//g, '.');

$scope.getSelectedFromUrl = function(){
    $scope.selectedOption = {"name": name, "url": url};
};

如果我在控制台中打印

console.log($scope.selectedOption);

我得到了正确的对象，例如:

Object {name: "Design", url: "account.design"}

在 html 中我只是添加了 ng-init:

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

但是什么都没有改变。

Answer 1

您可以使用 ng-init 指令来调用一个函数来解析路由并将其与 voices 数组中的项目进行匹配。然后将 selectedOption 模型设置为该数组项，这将设置选择选项。

ng-init="selectedOption = getSelectedFromURL()"