AngularJS - Remove an ng-repeat element if it contains string (s)

Question

I am clearing the external JSON URL that I am using and successfully removed the unnecessary special characters through the filter:

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'm trying to achieve now is to remove the ng-repeat element if it contains a specific line through a filter that I can use.

For instance:

 <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 ng-repeat with a filter:

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

Help with an example would be much appreciated.

Thanks! Roc.

Answer 1

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

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

So filter:'!Red' deletes everything that has the string “Red” in it. These results are passed to filter: '!Green' , which deletes any results that contain the string “Green” in them.

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

Performance update

I was interested to know about the cost of filtering, so I did it jsperf: http://jsperf.com/angular-ng-repeat-test1/2

I created 1000 lines ( items ) and then performed 4 tests with the following results on my system:

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

  {{items}} 

2) Display all 1000 with ng-repeat (no filter): 209 946 options per second 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, of course, is not a scientific test - I did not make any controls, and it is possible that things like caching influenced the results. But I think relative performance is interesting.

Answer 2

You can use any function available in the current area as a filter argument. For example, you can write something like this.

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 script. http://jsfiddle.net/2tpb3/