AngularJS - 如果包含字符串,则删除ng-repeat项

Question

我一直在清理我正在使用的外部JSON URL提要,并且我已经通过过滤器成功删除了不必要的特殊字符,如下所示:

angularJS.filter('removeChar', function(){
    return function(text) {
        text = text.replace(/\[[^\]]+\]/g, ''); // Characters inside Brackets
        return text.replace(/\;.*/, ''); // Characters after Colon
    };
});

<span ng-bind-html-unsafe="item | removeChar">{{item}}</span>

但是,我现在想要实现的是 - 如果它通过我可以使用的过滤器包含特定字符串,则删除ng-repeat项.

例如:

<div ng-repeat="item in items | removeItem">{{item['flowers']}}</div>

如果该项目包含"红色"或"绿色"字样

<div>Blue Roses</div>
<div>Red Roses</div>
<div>Orand and Green Roses</div>
<div>Yellow Roses</div>
<div>Red and Green Roses</div>

只有这将通过过滤器的ng-repeat显示:

<div>Blue Roses</div>
<div>Yellow Roses</div>

非常感谢帮助一个例子.

谢谢!鹏.

Answer 1

你可以filter一起使用!否定搜索字符串的谓词:

div ng-repeat="item in items | filter:'!Red' | filter: '!Green'">{{item['flowers']}}</div>

因此filter:'!Red'删除任何包含字符串"Red"的内容.这些结果是passéd filter: '!Green',删除其中包含字符串"Green"的任何结果.

这是相关的文档:http://docs.angularjs.org/api/ng.filter: filter

性能更新

我很好奇过滤的成本所以我做了这个jsperf:http://jsperf.com/angular-ng-repeat-test1/2

我创建了1,000个字符串(items),然后在我的系统上使用以下结果进行了4次测试:

1)使用DI 281,599 ops/sec显示全部1000

  {{items}}

2)显示所有1000使用ng-repeat(无滤波器): 209,946 ops/sec 慢16%

  <div ng-repeat="item in items"> {{item}}</div>

3) ng-repeat一个过滤器165,280 ops/sec减慢34%

  <div ng-repeat="item in items | filter:filterString1"> {{item}}</div>

4) ng-repeat有两个滤波器165,553,ops/sec慢38%

  <div ng-repeat="item in items | filter:filterString1 | filter:filterString2"> {{item}}</div>

这当然不是一个科学测试 - 我没有做任何控制,而且缓存之类的事情可能会影响结果.但我认为相对表现很有趣.

Answer 2

您可以使用当前作用域中的任何可用函数作为参数filter.例如,你可以写这样的东西.

HTML:

<div ng-app="" ng-controller="FooCtrl">
    <ul>
        <li ng-repeat="item in items | filter:myFilter">
            {{item}}
        </li>
    </ul>
</div>

JS:

function FooCtrl($scope) {
    $scope.items = ["foo bar", "baz tux", "hoge hoge"];

    $scope.myFilter = function(text) {
        var wordsToFilter = ["foo", "hoge"];
        for (var i = 0; i < wordsToFilter.length; i++) {
            if (text.indexOf(wordsToFilter[i]) !== -1) {
                return false;
            }
        }
        return true;
    };
}

这是一个工作小提琴.http://jsfiddle.net/2tpb3/