ngRepeat：愚弄 - 在中继器嵌套ngrepeat和空字符串复制 [英] ngRepeat:dupes - duplicates in repeater with nested ngrepeat and empty strings

问题描述

我和角度建立数据表，它来自一个JSON API调用工作。我在使用嵌套ngRepeat但是我看到那里整个表行缺少当行有几个空字符串奇怪的结果。

I'm working with angular building a table of data which comes from a JSON API call. I'm having to use a nested ngRepeat however I'm seeing strange results where whole table rows are missing when the row has a couple empty strings.

我可以用下面的普拉克重现。
http://plnkr.co/edit/VCzzzPzfgJ95HmC2f83P?p=$p$pview

I can reproduce with the following plunk. http://plnkr.co/edit/VCzzzPzfgJ95HmC2f83P?p=preview

<script>
function MyController($scope){
    $scope.test = {"rows":[
      ["one","two","three"],
      ["one","two","three"],
      ["one","","three"],
      ["one","",""],
      ["","two",""],
      ["","","three"],
      ["one","two","three"],
      ["one","two","three"],
      ]};};
</script>
<div ng-app ng-controller="MyController">
<table>
    <tr ng-repeat="(key,ary) in test.rows">
        <td>{{key}}</td>
        <td ng-repeat="value in ary">{{value}}</td>
    </tr>
</table>
</div>

请注意，当阵列有两个空字符串嵌套ngRepeat出现故障。

Notice when an array has two empty strings the nested ngRepeat appears to fail.

我是不是要疯了？是否有一个交代这个？

Am I going mad? Is there an explaination to this?

推荐答案

是的。您需要通过$指数使用的轨道，因为你重复的图元，或将其转换为对象的数组。理由是NG-重复创建唯一的ID $$ hashkey （并连接到重复对象属性）每个迭代的值，如果它是一个对象（除非您指定的东西如轨道所）。

Yes. You would need to use track by $index since you are repeating primitives, or convert it to array of objects. Reason is ng-repeat creates unique id $$hashkey (and attached to the repeated object as property) for each of the iterated values if it is an object (unless you specify something as track by).

在你的情况，你有基元，因此它不能附加属性本身，因此它试图考虑重复标识的价值和它发现当你有多个迭代空字符串复制。你会看到同样的效果，当你重复的对象数组超过他们中的一个未定义或空以及..

In your case you have primitives so it cannot attach a property itself, so it tries to consider the values repeated as identifier and it finds duplicate when you have multiple empty strings iterated. You would see the same effect when you repeat array of objects with more than one of them is undefined or null as well..

因此​​，在这种情况下，你可以通过 $指数使用的轨道如此反复项目将通过其索引跟踪。

So in this case you can use track by $index So repeated items will be tracked by its index.

<td ng-repeat="value in ary track by $index">{{value}}</td>

演示

Demo

更好的选择总是将其转换为对象数组，这样你就不会遇到这类问题。当你有一个唯一标识重复的元素属性（比如 ID ），您可以将其设置为按属性轨道。当你重新绑定阵列（或刷新阵列）角使用被跟踪的标识符，以确定是否需要从DOM移除元件并重新创建它或只刷新已存在的元素。其中列表被刷新的项目的列表中许多情况下，总是希望通过与重复性能的有效性的对象的识别符使用轨道。

Much better option always is to convert it to array of objects so you don't run into these kinds of issues. WHen you have a property that uniquely identifies the repeated element (say id) you can set it as track by property. When you rebind the array (or refresh the array) angular uses the tracked identifier to determine if it needs to remove the element from DOM and recreate it or just refresh the element that already exists. Many cases where a list is refreshed with the list of items it is always desirable to use a track by with an identifier on the object repeated for performance effectiveness.

这篇关于ngRepeat：愚弄 - 在中继器嵌套ngrepeat和空字符串复制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！