自定义索引的ngRepeat出现空白

时间:2016-11-10 12:37:31

标签: angularjs indexing ng-repeat

我在我的应用程序中使用了大量的大型数组。为了根据用户的选择拼接出我的数据集中的特定数据,我构建了我的数组,如下例所示:

var userList = [];
userList[user1.id] = user1;
userList[user2.id] = user2;

这使我可以使用以下方法拼接出特定元素,而无需遍历整个集合:

userList.splice(user1.id, 1);

但是,当我尝试使用ng-repeat语句在HTML中创建用户列表时,它会显示为空白。我的HTML是:

<div data-ng-repeat="user in userList">{{user.name}}</div>

我怀疑ngRepeat默认使用0,1,2 ..并且不知道如何处理我的自定义索引。我已经检查了几个来源,但我无法理解事情。当我通过简单地将用户添加到数组中而不是将它们分配给特定索引来添加我的用户时它确实有效,所以我知道我的其余代码工作正常。

帮助? d:

编辑:

由user.id&#34;添加trackBy&#34;轨道。没有解决它。

Plunkr! http://plnkr.co/edit/8hANBvXAIplHsq0Ph6GX?p=preview

3 个答案:

答案 0 :(得分:1)

您的代码不起作用,因为Array的索引是从零开始的意思,它们从0,1,2,... n开始,如果您正在尝试输入字母数字索引检查下面的代码片段,数组的长度为零。

&#13;
&#13;
var user1 = {
  id: 'A1B2',
  name: 'Pete'
};

var user2 = {
  id: 'A2B3',
  name: 'Jeff'
};

var userList = [];
userList[user1.id] = user1;
userList[user2.id] = user2;
console.log(userList);
console.log('length: ' + userList.length);
console.log(userList['A1B2']);
console.log(userList.A1B2); // behaving as JavaScript Object not array as property set using userList[user2.id] = user2;
&#13;
&#13;
&#13;

因此,您需要正确设置数据结构,您可以按照以下方式设置数组索引,或者使用数组上的push函数向数组中添加新项。

  var user1 = {
    id: 'A1B2',
    name: 'Pete'
  };

  var user2 = {
    id: 'A2B3',
    name: 'Jeff'
  };

  $scope.userList = [];
  $scope.userList[0] = user1; // $scope.userList.push(user1);
  $scope.userList[1] = user2; // $scope.userList.push(user2);

我建议您将收藏品名称从userList更改为users它看起来很干净,您不需要使用List关键字后缀集合我认为它看起来不整洁,只需将名字复数。

&#13;
&#13;
angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  var pete = {
    id: 'A1B2',
    name: 'Pete'
  };

  var jeff = {
    id: 'A2B3',
    name: 'Jeff'
  };

  vm.users = [];
  vm.users[0] = pete;
  vm.users[1] = jeff;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div ng-repeat="user in ctrl.users">
      <span>{{user.id}}, {{user.name}}</span>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

根据Adbul的指示,将每个用户idnumeric更改为alpha-numericarray's索引为基于number

例如: -

var user1 = {
  id: 0, //Any numeric Value
  name: 'Pete'
}

然后尝试$scope.userList[user1.id] = user1;

 <div data-ng-repeat="user in userList">{{user.name}}</div>

答案 2 :(得分:0)

请执行以下操作

控制器:

  $scope.userList = [];
  $scope.userList.push(user1);
  $scope.userList.push(user2);

查看:

      <tr ng-repeat="user in userList track by $index">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td></tr>