2016-05-16 5 views
0

Ich habe einen Nav Controller in Angular JS wie unten erwähnt erstellt.Angular js + ng-repeat + Alphanumerischer Index funktioniert nicht

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"; 
}]); 

Ich rufe diesen Controller in Index.html wie unten gezeigt.

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

wenn ich halten navItems Indizes alphanumerische dann ist es nicht Werte laden, aber wenn ich ihre Indizes numerischen halten, es Menüelemente.

Gibt es eine Möglichkeit, wie ich alphanumerische Indizes in ng-repeat verwenden kann?

Antwort

1

Ich denke, dass Sie eine andere Datenstruktur benötigen. Etwas wie folgt aus:

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> 
0

Ihre Syntax für ng-repeat ist korrekt.

Verwenden Sie jedoch nicht Array. Initialisieren Sie Ihre Objekte wie:

var navItems = {}; 

Als Randbemerkung, klingt wie eine sehr ungewöhnliche Sache Benutzer E-Mail in Localstorage zu halten (wenn dies eine Client-Server-Anwendung ist), aber natürlich hängt letztlich auf Ihrem Anwendungsfall.