AngularJS Track By $ index w /过滤和未过滤列表

时间:2018-01-22 14:52:48

标签: javascript angularjs

所以我基于相同的数据在视图中构建了2个单独的列表。

<md-list-item md-no-ink ng-repeat="item in $ctrl.items | filter: {custom: '!'} track by $index">

<md-list-item md-no-ink ng-repeat="item in $ctrl.items | filter: {custom: '!!'} track by $index">

您可以看到一个列表适用于custom个项目。 所以我的问题是,为了解决$index:0引用models-data中第一个元素的问题,有什么可以做的吗?

这很麻烦,因为我的custom列表允许在视图中使用CRUD功能,但$index:0列表中的custom不一定是$ctrl.items[0]

我目前的解决方案是将我的数据过滤到两个单独的集合中。然后将每个集合用于其受尊重的列表。

我很好奇是否有任何方法可以在保持单个数据数组的情况下执行此操作。

1 个答案:

答案 0 :(得分:0)

由于过滤器返回新数组,因此任何过滤器索引都不能代表原始数组中相同项的索引。

因此,如果您需要索引原始数组中的项目,只需将整个对象传递给任何crud操作,并使用Array#indexOf()

在控制器中进行索引编制

删除项目的示例:

<div ng-repeat="item in $ctrl.items| filter:someFilter track by $index">
   <button ng-click="$ctrl.deleteItem(item)">Delete:</button>
</div>

控制器

ctrl.deleteItem = function(item){
   let idx = ctrl.items.indexOf(item);
   // make sure it actually exists
   if(idx >-1 ){
      // remove from array
      ctrl.items.splice(idx, 1)
   }
}