5

我一直在清理我正在使用的外部 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>

一个例子的帮助将不胜感激。

谢谢！鹏。

4

2 回答 2

16

您可以将 afilter与 ! 否定搜索字符串的谓词：

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

所以filter:'!Red'删除任何包含字符串“Red”的东西。这些结果被传递给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）ng-repeat使用（无过滤器 ）显示所有 1000 ： 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，操作/秒慢 38%

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

这当然不是一个科学测试——我没有做任何控制，缓存之类的东西可能会影响结果。但我认为相对表现很有趣。

于 2013-11-15T05:21:27.630 回答
7

您可以使用当前范围内可用的任何函数作为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/

于 2013-11-15T05:34:17.573 回答