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

【问题标题】：AngularJS - Remove ng-repeat item if contains string(s)AngularJS - 如果包含字符串，则删除 ng-repeat 项目
【发布时间】：2013-11-28 10:13:24
【问题描述】：

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

如果项目包含单词“Red”或“Green”

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

非常感谢您提供示例。

谢谢！大鹏。

【问题讨论】：

标签： javascript angularjs replace filtering ng-repeat

【解决方案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>

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

【讨论】：

谢谢戴夫！正是我想要的。两个问题：1) 如果过滤的内容少于 300 个对象，您是否看到任何性能影响？最有可能 100 或更少？ 2) 将所有谓词放在一个 .filter 函数中有多难？再次感谢戴夫！
虽然更多的项目确实会对性能产生影响。我认为 300 应该没问题。我已经看到数字在 2,000 左右浮动，是问题蔓延的地方。但这是轶事。如果你真的想要实数，你总是可以将代码扔到 jsperf.com 并与 vs 进行比较而不进行过滤。 2) 在一个过滤器中进行多个or 测试很容易。但是你需要and他们。所以我会自己写。它们很简单：docs.angularjs.org/tutorial/step_09 看起来丹尼尔已经发布了一种方法。

【解决方案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/

【讨论】：