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

Question

我已經在Angular JS中創建了一個Nav控制器，如下所述。

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

我認爲你需要一個不同的數據結構。事情是這樣的：

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> 

Answer 2

你的ng-repeat語法是正確的。

但是，不要使用Array。初始化您的對象爲：

var navItems = {}; 

作爲一個側面說明，保持用戶的電子郵件中的localStorage聽起來很尋常的事（如果這是一個客戶端 - 服務器應用程序），但當然，這最終取決於你的使用情況。