Question

我一直在清理我正在使用的外部JSON网址Feed，并且我已经通过过滤器成功删除了不必要的特殊字符：

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>

非常感谢帮助一个例子。

谢谢！ ROC。

Answer 1

你可以使用filter！否定搜索字符串的谓词：

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，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/

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

2 个答案: