ngRepeat:dupes - 在具有嵌套 ngrepeat 和空字符串的转发器中重复 [英] ngRepeat:dupes - duplicates in repeater with nested ngrepeat and empty strings

问题描述

我正在使用 angular 构建一个来自 JSON API 调用的数据表.我不得不使用嵌套的 ngRepeat 但是我看到奇怪的结果，当行有几个空字符串时，整个表行都丢失了.

我可以使用以下 plunk 进行复制.http://plnkr.co/edit/VCzzzPzfgJ95HmC2f83P?p=preview

<div ng-app ng-controller="MyController"><表格><tr ng-repeat="(key,ary) in test.rows"><td>{{key}}</td><td ng-repeat="数组中的值">{{value}}</td></tr>

请注意，当数组有两个空字符串时，嵌套的 ngRepeat 似乎会失败.

我会生气吗?对此有解释吗?

解决方案

是的.您需要使用 track by $index 因为您正在重复原语，或者将其转换为对象数组.原因是 ng-repeat 为每个迭代值创建唯一的 id $$hashkey(并作为属性附加到重复的对象上)，如果它是一个对象(除非您指定某些内容作为 track by).

在您的情况下，您有原语，因此它无法附加属性本身，因此它会尝试将重复的值视为标识符，并且当您迭代多个空字符串时，它会发现重复的值.当您重复包含多个未定义或为空的对象数组时，您会看到相同的效果..

所以在这种情况下，您可以使用 track by $index 这样重复的项目将通过其索引进行跟踪.

{{value}}</td>

演示

更好的选择始终是将其转换为对象数组，这样您就不会遇到此类问题.如果您有一个唯一标识重复元素的属性(比如 id)，您可以将其设置为 track by 属性.当您重新绑定数组(或刷新数组)时，angular 使用跟踪的标识符来确定它是否需要从 DOM 中删除元素并重新创建它，或者只是刷新已经存在的元素.许多使用项目列表刷新列表的情况下，总是希望使用跟踪对象上的标识符重复以提高性能.

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.

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>

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

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

解决方案

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

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:dupes - 在具有嵌套 ngrepeat 和空字符串的转发器中重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！