Question

33

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

rated 0 times [ 38] [ 5] / answers: 1 / hits: 22697 / 11 Years ago, fri, november 15, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

santana

Add To Favorites

Follow

Total Points: 595

Total Questions: 94

Total Answers: 98

Location: Zambia

Member since Mon, Oct 24, 2022

2 Years ago

answered 11 Years ago zariahdiamondz · Accepted Answer

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.