我在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中使用字母数字索引吗?
我认为您需要一个不同的数据结构。类似这样的东西:
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>
ng repeat的语法是正确的。
但是,不要使用Array。将您的对象初始化为:
var navItems = {};
顺便说一句,将用户电子邮件保存在LocalStorage中听起来很不寻常(如果这是一个客户端-服务器应用程序),但当然这最终取决于您的用例。