angularjs filter on array

Use property in input’s ng model

Filter is used for selecting a subset of a give array. The requirements for a filter are an array to be filtered and the predicate based on which the array need to be filtered. The predicate could be as simple as a string and let’s try filtering using a string at first.

<div class="container" style="margin-top:100px;">
    <div class="row">
        <div class="span12" ng-controller="MediaCtrl">
            <input type="text" ng-model="searchTerm">
            <table class="table">
                <thead>
                    <tr>
<th><a href="" ng-click="setSortExpression('artistName')" >Artist Name</a></th>
<th><a href="" ng-click="setSortExpression('trackName')">Track</a></th>
<th><a href="" ng-click="setSortExpression('primaryGenreName')">Genre</a></th>
<th><a href="" ng-click="setSortExpression('trackPrice')" >Price</a></th>                       
                    </tr>
                </thead>
                <tbody>
<tr ng-repeat="r in result.results | filter:searchTerm  | orderBy:sortExpression">
    <td>{{r.artistName}}</td>
    <td>{{r.trackName}}</td>
    <td>{{r.primaryGenreName}}</td>
    <td>{{r.trackPrice}}</td>
</tr>
                </tbody>
            </table>


        </div>
    </div>
</div>

Giving a full blown filtering to our application is as easy as introduing a new model (searchTerm here) and applying the filter to the array model passing the model value as argument. The drawback (or advantage) of this method is it matches the records based on comparing the search term with each and every property of the objects in the array. If we need to fine tune the filtering process we can pass an object instead of a simple string.

<div class="container" style="margin-top:100px;">
    <div class="row">
        <div class="span12" ng-controller="MediaCtrl">
            <input type="text" ng-model="searchTerm.$">
            <table class="table">
                <thead>
                    <tr>
<th><a href="" ng-click="setSortExpression('artistName')" >Artist Name</a>
    <br><input type="text" ng-model="searchTerm.artistName">
</th>
<th><a href="" ng-click="setSortExpression('trackName')">Track</a>
    <br><input type="text" ng-model="searchTerm.trackName"></th>
<th><a href="" ng-click="setSortExpression('primaryGenreName')">Genre</a>
    <br><input type="text" ng-model="searchTerm.primaryGenreName"></th>
<th><a href="" ng-click="setSortExpression('trackPrice')" >Price</a>
    <br><input type="text" ng-model="searchTerm.trackPrice"></th>                       
                    </tr>
                </thead>
                <tbody>
<tr ng-repeat="r in result.results | filter:searchTerm  | orderBy:sortExpression">
    <td>{{r.artistName}}</td>
    <td>{{r.trackName}}</td>
    <td>{{r.primaryGenreName}}</td>
    <td>{{r.trackPrice}}</td>
</tr>
                </tbody>
            </table>


        </div>
    </div>
</div>

Now the search tern is an object with properties matching those on the listed columns and the list is filtered based on the values inside this object. Dollar ($) symbol has a special meaning of match all the properties and it is used for searching across all of the properties.

Use function

Another way to do this is to use a function:

<div ng-repeat="product in products | filter: myFilter">

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

Use object structure in filter expression

If you want to filter on a grandchild (or deeper) of the given object, you can continue to build out your object hierarchy. For example, if you want to filter on ‘thing.properties.title’, you can do the following:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

You can also filter on multiple properties of an object just by adding them to your filter object:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

Be careful with angular filter

If you want select specific value in field, you can’t use filter.

Example:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

This will select both, because use something like substr
That means you want select product where “color” contains string “blue” and not where “color” is “blue”.

<div ng-repeat="product in products | filter: { color: 'blue' }:true">

will work on only exact matches (the ‘true’ at the end is the comparator argument: link

from here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s