Question

我尝试实现一个返回列表的过滤器以及divider的条目。此过滤器也可以使用TextSearch。

模板：

  <input type="search" placeholder="Search" ng-model="searchText" autocorrect="off" >

  <li class="item item-checkbox" 
        ng-repeat="destination in destinations |            (a)
                destinationFilter:searchText:true"          (b) 
        ng-class="destination.letter? 'item-divider':''">   (c)

迭代数组目标
b使用自定义过滤器
c如果来自过滤器的项目有字母字段，则标记为分隔符

过滤：

app.filter('myFilter', function() {
return function(input, key, startsWith) {
    if(input){
        var filteredInput = [];   (1)
        var lastChar = '';        (2)
        var re = /.*/i;           (3)
        if(key){                
            if(startsWith)        (4)
                key = "^"+key;
            re = new RegExp(key, "i");
        }
        for(var i=0; i<input.length; i++){
            var item = input[i];
            if(item.name.match(re)){                    (5)
                if(item.name.charAt(0) !== lastChar) {  (6) 
                  filteredInput.push({name:item.name.charAt(0),letter:true});
                  lastChar = item.name.charAt(0);
                }
                filteredInput.push(item);               (7)
            }
        };
        return filteredInput;                            
    }
    return input;    
};
});

1个数组，用于包含来自输入
2存储最后一个分隔符
3个正则表达式以匹配所有内容
4 if statsWith - ＆gt;只检查单词
5 - ＆gt;将项目推送到filteredInput
6如果最后一个字符匹配实际的item-firstChar，则不生成新的list-divider-entry
7将项目推送到filteredInput数组

不幸的是，这个过滤器通常由30个元素的列表调用。它也会导致此错误：

Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.25/$rootScope/infdig?

我猜输入的每个元素都添加了分隔符。看起来很奇怪。

FIDDLE：HERE

Answer 1

问题是你的过滤器会在每次调用时生成一个新数组，这会导致角度为infinite loop。

您最好提供ng-repeat一个常量数组而不是函数（过滤器）。在您的示例中，可以通过在控制器中应用过滤器而不是视图来完成（尽管您的真实案例可能不同）：

$scope.filtered = $filter('destinationFilter')($scope.destinations, undefined, true);

在你的HTML中：

<li class="item item-checkbox" ng-repeat="destination in filtered" ng-class="destination.letter? 'item-divider':''" >

请参阅此fiddle。

具有分离器功能的angularjs过滤器

1 个答案: