AngularJS 1.6中ng-repeat在长度超23的数组上不生效问题求助

问题根因 #

该现象是AngularJS ng-repeat指令的默认校验逻辑导致的：ng-repeat默认使用集合项本身的值作为唯一跟踪标识，当数组中出现完全相同的重复值时，会抛出[ngRepeat:dupes]错误并终止渲染。
提供的测试数组前23项均为唯一值，第24项开始出现重复的nature 、natures ，因此刚好在数组长度超过23时渲染失效，和limitTo配置无关，调整limitTo参数不会生效。出现该问题时打开浏览器控制台，可直接看到对应类型的错误提示，快速定位根因。

解决方法 #

方法1：数组去重（推荐） #

如果业务上不需要保留重复标签，直接对editDocument.Tags做去重处理即可，参考代码：

// 兼容低版本JS的去重方案
editDocument.Tags = editDocument.Tags.filter(function(item, index, self) {
  return self.indexOf(item) === index;
})

// ES6 支持环境的简化去重方案
editDocument.Tags = [...new Set(editDocument.Tags)]

方法2：添加track by规则 #

如果业务需要保留重复元素，修改ng-repeat的写法，使用数组索引作为跟踪标识即可正常渲染：

<h4>
  <span ng-repeat="tag in editDocument.Tags | limitTo: 100 track by $index" class="badge badge-pill badge-info">
    <span ng-bind-html="tag"></span>
    <a href="" ng-click="action_deleteTag_documentRow($event, editDocument.Id)">
      &times; 
    </a>
  </span>
</h4>

内容的提问来源于stack exchange，提问作者Sornin