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

Question

I've been cleaning up an external JSON URL feed that I am using, and I have successfully removed unnecessary special characters via a filter as so:

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>

However, what I am trying to achieve now - is to remove an ng-repeat item if it contains a specific string via a filter I can use.

For example:

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

If the item contains the word 'Red' or '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>

Only this will display from the ng-repeat with the filter:

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

Help with an example would greatly be appreciated.

Thanks! Roc.

KayakDave · Accepted Answer · 2013-11-16 00:45:34Z

16

You can use a filter along with the ! predicate that negates the search string:

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

So filter:'!Red' removes anything that does have the string "Red" in it. Those results are passéd to filter: '!Green' which removes any results that have the string "Green" in them.

Here's the relevant docs: http://docs.angularjs.org/api/ng.filter:filter

Performance Update

I was curious about the cost of filtering so I did this jsperf: http://jsperf.com/angular-ng-repeat-test1/2

I created 1,000 strings (items) and then did 4 tests with the following results on my system:

1) Display all 1000 using DI 281,599 ops/sec

  {{items}}

2) Display all 1000 using ng-repeat (no-filter): 209,946 ops/sec 16% slower

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

3) ng-repeat with one filter 165,280 ops/sec 34% slower

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

4) ng-repeat with two filters 165,553, ops/sec 38% slower

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

This is certainly not a scientific test- I didn't do any controls and it's possible for things like caching to have influenced the results. But I think the relative performance is interesting.

edited Nov 16, 2013 at 0:45

answered Nov 15, 2013 at 5:21

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roc Over a year ago

Thanks Dave! Exactly what I was looking for. Two questions: 1) Do you see any performance impact if the filtered content is less than 300 objects? Most likely 100 or less? 2) How difficult would it be to place all of the predicates into one .filter function? Thank you again Dave!

KayakDave Over a year ago

While certainly more items does have a performance impact. I think you should be fine with 300. I've seen numbers float around about 2,000 being where issues creep in. But that's anecdotal. If you really want solid numbers you could always toss the code into jsperf.com and compare with vs without filtering. 2) It's easy do multiple or tests in one filter. But you need to and them. So I'd write my own. They're easy: docs.angularjs.org/tutorial/step_09 And looks like Daniel has posted an approach to that.

Daniel Perez · Accepted Answer · 2013-11-15 05:34:17Z

You can use any function available in the current scope as the argument of filter. So you could write something like this, for example.

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

Here is a working Fiddle. http://jsfiddle.net/2tpb3/

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related