141

I am trying to create a custom filter in AngularJS that will filter a list of objects by the values of a specific property. In this case, I want to filter by the "polarity" property(possible values of "Positive", "Neutral", "Negative").

Here is my working code without the filter:

HTML:

<div class="total">
    <h2 id="totalTitle"></h2>
    <div>{{tweets.length}}</div>
    <div id="totalPos">{{tweets.length|posFilter}}</div>
    <div id="totalNeut">{{tweets.length|neutFilter}}</div>
    <div id="totalNeg">{{tweets.length|negFilter}}</div>
</div>

Here is the "$scope.tweets" array in JSON format:

{{created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user       screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"}}

The best filter I could come up with as follows:

myAppModule.filter('posFilter', function(){
return function(tweets){
    var polarity;
    var posFilterArray = [];
    angular.forEach(tweets, function(tweet){
        polarity = tweet.polarity;
        console.log(polarity);
        if(polarity==='Positive'){
              posFilterArray.push(tweet);
        }
        //console.log(polarity);
    });
    return posFilterArray;
};
});

This method returns an empty array. And nothing is printed from the "console.log(polarity)" statement. It seems like I am not inserting the correct parameters to access the object property of "polarity."

Any ideas? Your response is greatly appreciated.

1
  • 3
    Nice question, but code could be reduced, big part of it is not relevant to the question.
    – setec
    Dec 4, 2014 at 8:26

5 Answers 5

219

You simply have to use the filter filter (see the documentation) :

<div id="totalPos">{{(tweets | filter:{polarity:'Positive'}).length}}</div>
<div id="totalNeut">{{(tweets | filter:{polarity:'Neutral'}).length}}</div>
<div id="totalNeg">{{(tweets | filter:{polarity:'Negative'}).length}}</div>

Fiddle

8
  • 1
    Is there a way to filter the item list by passing a custom filter to an ng-click event outside of the ng-repeat statement? In this case, I want to place three "polarity" buttons above the results that filter based on the rating. Jul 22, 2013 at 19:54
  • 2
    I'm not sure to understand. If you want to choose the polarity to filter, you can pass a scope variable instead of a plain text : filter:{polarity:polarityToFilter} where $scope.polarityToFilter is filled by a click on one of the three buttons. Is this what you are trying to do ?
    – Blackhole
    Jul 22, 2013 at 21:43
  • That seems like it could work. However, my app also needs to be able to delete individual list items. Jul 23, 2013 at 18:55
  • The problem with filtering is that a new array is created every time a filter is applied which breaks the tie between a filtered item and its original index in the unfiltered array. Is there a way to maintain the tie or is ng-hide my only option? Here's a tutorial for an alternative to filtering by using ng-hide: bennadel.com/blog/… Jul 23, 2013 at 19:43
  • ngRepeat exposes an $index propertie on the local scope that you can also use.
    – Blackhole
    Jul 24, 2013 at 11:48
27

The documentation has the complete answer. Anyway this is how it is done:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{age:filterValue}:true"> {{i | json }}</li>

will filter only age in data array and true is for exact match.

For deep filtering,

<li ng-repeat="i in data | filter:{$:filterValue}:true"> {{i}}</li>

The $ is a special property for deep filter and the true is for exact match like above.

2
  • Simple and clean.
    – scaryguy
    Sep 15, 2016 at 4:50
  • Is this filter inbuilt or need to be written in both Angular & AngularJS? Apr 10, 2019 at 7:07
23

You could also do this to make it more dynamic.

<input name="filterByPolarity" data-ng-model="text.polarity"/>

Then you ng-repeat will look like this

<div class="tweet" data-ng-repeat="tweet in tweets | filter:text"></div>

This filter will of course only be used to filter by polarity

5

We have Collection as below:


enter image description here

Syntax:

{{(Collection/array/list | filter:{Value : (object value)})[0].KeyName}}

Example:

{{(Collectionstatus | filter:{Value:dt.Status})[0].KeyName}}

-OR-

Syntax:

ng-bind="(input | filter)"

Example:

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName"
4

You can try this. its working for me 'name' is a property in arr.

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.