CODEWITHSUNDEEP
javascriptjsonangularjsangularjs-ng-repeat
eat-sleep-code
eat-sleep-code

Reputation: 4855

How do you exclude items from AngularJS ng-repeat

Is it possible to exclude items in an ng-repeat?

For example, I have something similar to the following (simplified to keep things shorter):

<div class="row" data-ng-repeat="entry in data.feed.entry | orderBy:'gsx$timestamp.$t':true">
{{entry.gsx$jobID.$t}}
</div>

I have another scope object called exclusionData that is structured in a similar fashion. I want to exclude any items in my first ng-repeat that appear in an exclusionData.feed.entry.gsx$jobID.$t

Or is there an easier way to do this back in my controller (i.e. do the exclusion in data right away)? Both the data and the exclusionData is sourced from two different JSON feeds.

Upvotes: 4

Views: 3087

Answers (4)

Brian Noah
Brian Noah

Reputation: 2972

This will exclude the matching data simply adding an ng-if, and adding a bang to make it falsy.

<div 
    class="row"
    data-ng-repeat="(key, entry) in data.feed.entry | orderBy:'gsx$timestamp.$t':true"
    ng-if="!exclusionData.feed[key]gsx$jobID.$t">
    {{entry.gsx$jobID.$t}}
</div>

Upvotes: 2

botero
botero

Reputation: 596

You can create a filter like this:

angular.module('appFilters', []).filter('yourFilterName', function() {
    return function(input, key) {          
      var myList = [];
      for(var i = 0; i < input.length; i++){
        var found = _.find($scope.exclusionData, function() { // You can replace this with your own function.
          // Your own logic here    
        });

        if(found){              
          myList.push(input[i]);
        }
      }
      return myList;
    };
  });

I am assuming you have underscore included in you project, but you can implement your own search function instead.

The in your template you pass the filter like this:

<div class="row" data-ng-repeat="entry in data.feed.entry | yourFilterName | orderBy:'gsx$timestamp.$t':true">
  {{entry.gsx$jobID.$t}}
</div>

Upvotes: 0

yangli-io
yangli-io

Reputation: 17334

You can either use a filter shown below, or just an ng-if/ng-show

<div class="row" data-ng-repeat="entry in data.feed.entry | orderBy:'gsx$timestamp.$t':true | filter: {gsx$exlucde.$t: true}">
{{entry.gsx$jobID.$t}}
</div>

data.feed.entry = [{
    gsx$jobID.$t: 'something',
    gsx$exlucde.$t: true,
    gsx$timestamp.$t: '1/1/1990'
}]

Upvotes: 1

Damian Nikodem
Damian Nikodem

Reputation: 1289

the easiest way to do this is with a filter directive in your repeat, but you could also do this in your controller.

It depends on how your application looks like from a OO design perspective.

Upvotes: 0

Related Questions