Angular js + ng-repeat +英数字のインデックスが機能しない

Question

以下に述べるようにAngular JSでNav Controllerを1つ作成しました。

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にユーザーの電子メールを維持することは非常に珍しいことのように聞こえるが、もちろん、これは最終的にあなたのユースケースに依存します。