Angular js + ng-repeat + 字母数字索引不起作用

Question

我已经在 Angular JS 中创建了一个导航控制器，如下所述。

weatherApp.controller('navCtrl', ["$scope", "$localStorage", function($scope, $localStorage){

    if($localStorage.user_email){
        var navItems = new Array();
        navItems["/"] = 'Home';
        navItems["/logout"] = 'Logout';
        $scope.navItems = navItems;
    }
    else{
        var navItems = new Array();
        navItems["/"] = 'Home';
        navItems["/login"] = 'Login';
        $scope.navItems = navItems;
    }
    $scope.test = "test";
}]);

我在 index.html 中调用这个控制器，如下所示。

<ul class="nav navbar-nav" ng-controller="navCtrl">
    <li ng-repeat="(url, navItem) in navItems">
        <a href="#{{ url }}">{{ navItem }}</a>
    </li>
</ul>

如果我保留 navItems 索引字母数字，那么它不会加载值，但如果我保留其索引数字，它会显示菜单项。

有什么方法可以在 ng-repeat 中使用字母数字索引吗？

Answer 1

您的 ng-repeat 语法是正确的。

但是，不要使用数组。将您的对象初始化为：

var navItems = {};

附带说明一下，将用户电子邮件保存在 LocalStorage 中听起来很不寻常（如果这是一个客户端-服务器应用程序），但这当然最终取决于您的用例。

Answer 2

我认为您需要不同的数据结构。像这样：

https://jsfiddle.net/relferreira/3aexpfk5/

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;

  vm.navItems= [
    { path: '/', name: 'Home'},
    { path: '/login', name: 'Login'},
  ];

}

HTML:

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">

    <ul class="nav navbar-nav">
        <li ng-repeat="navItem in mainVm.navItems">
            <a href="#{{ navItem.path }}">{{ navItem.name }}</a>
        </li>
    </ul>
  </div>

</div>

Angular js + ng-repeat + 字母数字索引不起作用

Angular js + ng-repeat + alphanumeric index not working

javascript

angularjs

ng-repeat

angularjs-ng-repeat