I'm currently learning how to use ng-repeat to display lists of items, and how to use filters to limit the data displayed in those lists.
Based on the AngularJS tutorials (docs.angularjs.org/tutorial/), I have a collection of phone JSON objects in the following format:
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nEx[eroemce the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
}
There are a bunch of those; some are tablets, others are phones.
We then have some HTML with Angular directives to display a list of phones (showing only the pertinent parts -- a controller is referenced elsewhere in this HTML, and that controller knows where to find the 'phones' data):
Search: <input ng-model="query" />
<ul>
<li ng-repeat="phone in phones | filter: query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
This is all grand. When I type search text in the "query" input, the data is restricted to only that data that contains that text. However, what happens when I want to limit my data to only phones, and not tablets? When I type "phone" into the search bar, it still shows me everything, because all of my images are under a directory called "phones". My options are to either a) rename my directory structure, or b) eliminate the imageUrl field from my filter. While my directory structure probably shouldn't reference "phones" if it contains more than just phones, renaming a structure can often affect your entire project, so let's modify the filter instead.
One option is to specify what portion of data you'd like to filter on.
I've learned two ways of doing this. The first is to specify the intended data on the input itself:
Search: <input ng-model="query.snippet" />
...
<li ng-repeat="phone in phones | filter: query">
...
This modifies the filter so that you'll only be searching in the 'snippet' field in the data. Now this technique is effective, but seems non-intuitive to me. Why should you be tweaking the input instead of tweaking the filter itself? To me, it looks like we've just changed the name of the input's model reference to "query.snippet". The fact that we're only querying the "snippet" field in the data is not obvious to me. I'm no expert, however, so if you like this method, then don't let me stop you -- in fact, I encourage you to add a comment to this post explaining why you like this method.
The second method I've learned, and the one I like more, allows you to tweak the actual filter:
Search: <input ng-model="query" />
...
<li ng-repeat="phone in phones | filter: {snippet:query}">
...
This code behaves in the exact same way as the code above, but, to me, is much more readable. It says "show me a list of all objects in 'phones', but filter the data so that the 'snippet' field contains whatever is in the 'query' model reference."
Note: If you run into an issue where the solution above results in ALL data being filtered out on app startup (and then working properly when you edit the input query), consider upgrading to a newer version of Angular. This was a problem for me with version 1.0.6, but is no longer a problem in version 1.1.5
But what if we want to filter on multiple fields? What if we want to filter on both 'snippet' and 'id'?
For that, we'd write a custom filter:
In the controller:
$scope.queryFilter = function(movie) {
if($scope.query != null) {
return movie.snippet.toLowerCase().indexOf($scope.query.toLowerCase()) != -1
|| movie.id.toLowerCase().indexOf($scope.query.toLowerCase()) != -1;
}
return true;
};
In the HTML:
<li ng-repeat="phone in phones | filter: queryFilter">
That will filter only on the fields we specified, namely 'id' and 'snippet'
Ideally, there'd be a way to filter against all fields *except* a particular field. For example, we'd like to filter against all fields except for 'imageUrl', without needing to specify 'snippet', 'id', 'name', etc. I imagine we could write a custom filter to iterate all fields of a particular object, ignoring 'imageUrl', but I'm not creative enough with JavaScript to do that. If you'd like to give it a shot, please add a comment.
I hope this helped someone. Please leave questions and comments below.
