列出一个对象(Angular.js)

时间:2015-12-31 04:31:36

标签: javascript angularjs

我正在生成一个列表来搜索密钥" name"和"键入"。

results.push({ name: item.beast, type: 'color of animal' });

但是我发现这个错误来找到数组$ scope.data中包含的元素:

Error: [$ rootScope: infdig] $ 10 digest () iterations reached. Aborting! Watchers fired in the last five iterations.

这是我的代码:

http://plnkr.co/edit/EDd578?p=preview

2 个答案:

答案 0 :(得分:1)

这里的问题是您使用一组数据进行过滤,但尝试以不同的格式显示来自该过滤过程的结果数据集。我主张在输入上使用ng-change并使用新的数据集来填充重复的项目。

控制器

$scope.matches = [];

$scope.findMatches = function(items, searchText) {
var results = [];
if (searchText) {
  angular.forEach(items, function(item) {
    if (item.beast.indexOf(searchText) === 0) {
      results.push({
        name: item.beast,
        type: 'animal'
      });
    }

    if (item.color.indexOf(searchText) === 0) {
      results.push({
        name: item.color,
        type: 'color of animal'
      });
    }
  });
}

return results;
}

HTML

<input type='text' ng-model='search' id='search' ng-change="matches = findMatches(data, search)">
<hr/>

<ul>
  <li ng-repeat="item in matches track by $index">{{item.name}} and {{item.type}}</li>
</ul>

plunkr - http://plnkr.co/edit/hkMXPP?p=preview

答案 1 :(得分:0)

每次运行过滤器时都会创建一个新数组,并返回该数组。这使得角度认为你每次都改变了数组(它不检查项目相等性,而是通过===检查引用相等性)。

有关详细信息,请查看this

解决方案是在场内修改items数组并返回它,因此引用保持不变。