Mastering Web Application

Chapter 4

If we assume that our data model has the following properties: name, desc,
priority, estimation and done, we could write a template for the discussed
UI as follows:

<div class="well">

<label>

Search for:<input type="text" ng-model="criteria">

</label>

</div>

<table class="table table-bordered">

<thead>

<th>Name</th>

<th>Description</th>

...

</thead>

<tbody>

<tr ng-repeat="backlogItem in backlog | filter:criteria">

<td>{{backlogItem.name}}</td>

<td>{{backlogItem.desc}}</td>

...

</tr>

</tbody>

</table>

As you can see it is extremely easy to add a filter based on user's input; we just need
to wire up value of an input field as an argument to the filter. The rest will be taken
care of by AngularJS automatic data binding and refresh mechanism.

The matching criteria can be negated by prefixing with the! operator.

In the previous example all the properties of source objects are searched for a
substring match. If we want to have a more precise control over properties matching
we can do so by providing an object argument to a filter. Such an object will act as
a "query be example". Here we want to limit matching to the name property and
include only items that are not done yet:

ng-repeat="item in backlog | filter:{name: criteria, done: false}"

In this code snippet all properties of an object specified as an argument must match.
We could say that conditions expressed by the individual properties are combined
using the AND logical operator.