Question

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

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返回正确的过滤项目）

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

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>

对我来说，前两次工作没有意义，之后它再也不起作用了。

这可能是什么问题？此代码在chrome扩展（popup.html）中运行，但我认为它不重要。

Answer 1

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

在我的方案中，这个问题是由于我原型化对象＆＃39; 造成的。我没有在过滤器中使用原型。但是，只是在某个地方的代码中引入了这个问题......

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

1 个答案: