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

时间:2016-05-16 12:51:00

标签: javascript angularjs angularjs-ng-repeat ng-repeat

我在Angular JS中创建了一个Nav Controller,如下所述。

$count = array();
      foreach($results as $r)
      {
        $key = array_keys($r->id);
        $count[$key]++;
      }

我在index.html中调用此控制器,如下所示。

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

如果我将 navItems 索引保留为字母数字,则它不会加载值,但如果我将其索引保持为数字,则会显示菜单项。

我有什么办法可以在ng-repeat中使用字母数字索引吗?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

ng-repeat的语法是正确的。

但是,请勿使用Array。将对象初始化为:

var navItems = {};

作为旁注,在LocalStorage中保留用户电子邮件听起来很不寻常(如果这是一个客户端 - 服务器应用程序),但当然这最终取决于您的用例。