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

AngularJS - Remove ng-repeat item if contains string(s)

本文关键字：ng 删除 如果 包含 字符串 AngularJS      更新时间：2023-09-26

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

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

举例帮助将不胜感激。

谢谢！大鹏。

您可以将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 操作/秒显示所有 1000

次 
  {{items}}

2） 使用ng-repeat显示所有 1000 次（无过滤器）：209,946 次操作/秒 慢 16%

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

3） 使用一个滤波器ng-repeat 165,280 次操作/秒 慢 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>

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

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

相关文章：