键值对象上的 ng-repeat 自定义过滤器仅更新视图 2 次答案

【问题标题】：ng-repeat custom filter on key value object updates view only 2 times键值对象上的 ng-repeat 自定义过滤器仅更新视图 2 次
【发布时间】：2017-05-14 05:23:27
【问题描述】：

我创建了一个自定义过滤器来过滤键/值对，例如：

module.controller('tabController', ['$scope', function ($scope) {
   var self = this;
   self.items =  {
       "a": "a",
       "b": "b",
       "c": "c"
   }

过滤器：

module.filter('filterKeyValue', function () {

return function (items, input) {
    if (!input) return items;
    input = input.toLowerCase();

    let filtered = {};
    let reverse = false;
    if (input.startsWith('!')) {
        input = input.slice(1).trim();
        reverse = true;
    }

    angular.forEach(items, (value, key) => {
        let k = key.toLowerCase();
        let v = value.toLowerCase();
        let indexOfKey = k.indexOf(input);
        let indexOfValue = v.indexOf(input);

        if (!reverse) {
            if (indexOfKey >= 0 || indexOfValue >= 0) {
                filtered[key] = value;
            }
        } else {
            if (indexOfKey < 0 && indexOfValue < 0) {
                filtered[key] = value;
            }
        }
    });
    console.log('filtered items: ', filtered);
    return filtered;
};
});

过滤器工作得非常好（总是根据console.log返回正确的过滤项目）

问题出在视图中，视图仅使用过滤后的项目更新两次（由于某种原因总是两次，或者如果“项目”中不存在搜索词则第三次）

So i search for:
'a' -> works fine, view gets updated ('a' exists in 'items')
'b' -> works fine, view gets updated ('b' exists in 'items')
'c' -> does not work, the view does not get updated ('c' exists in 'items')
'f' -> does work, view gets updated with no results ('f' does NOT exist in 'items')

我使用以下标记（短版）：

<div ng-controller="tabController as tab">

 <input type="text" ng-model="tab.filter">

 <table>
   <thead>
        <tr>
           <th>Key</th>
           <th>Value</th>
        </tr>        
   </thead>
   <tbody>
      <tr ng-repeat="(key,value) in tab.items | filterKeyValue:tab.filter">
        <td>{{key}}</td>                                
        <td>{{value}}</td>
      </tr>
   </tbody>
</table>

</div>

对我来说，前 2 次有效，之后不再有效。

这可能是什么问题？此代码在 chrome 扩展 (popup.html) 中运行，但我认为这无关紧要。

【问题讨论】：

你有什么小提琴吗？它在这里工作jsfiddle.net/U3pVM/32229
@Rhea 我看到它确实在小提琴中工作。这让我剥离了我的整个应用程序。我认为这是由于第三方库。我需要弄清楚它是哪一个..

标签： javascript angularjs google-chrome-extension angularjs-ng-repeat angularjs-filter

【解决方案1】：

我已经找到了解决这个问题的方法：

在我的场景中，这个问题是因为我对“对象”进行了原型设计。 我没有在过滤器中使用原型。但是只是将它放在代码中的某个地方导致了这个问题......

【讨论】：