Filter on a particular field using ng-repeat and filter AngularJS

03 Nov 2013 » {[{categoryPostCurrent}]}

While learning AngularJS you probably run the official Tutorial. In this official tutorial, you can see how to write a filter tied to an ng-repeat.

Here is an example of code that allow this kind of filtering:

    <input ng-model="filterpost"/>
    <ul>
        <li ng-repeat="post in posts | filter:filterpost" >{{ post.title }}</li>
    </ul>    

Let's assume that the post variable is a JSON object with the following structure:

    {
        title: "my title",
        summary: "My summary",
        date: "2015-02-04"
    }  

In this example, typing text in the input field make the list filtered according to this text. But, it appears that all values properties of the post object are fetched in order to find a match.

Sometimes, it would be handy to filter only on one property; so the following code show you how to perform a specific filter on the title property of the post object:

   <ul>
        <li ng-repeat="post in posts | filter:{title:filterpost}" >{{ post.title }}</li>
    </ul>    

In this example, posts are filtered only on the value of their title.

Voir aussi...

• {[{ post.date}]} » {[{ post.title }]}