- Getting started with AngularJS
- Creating an AngularJS Controller
- The AngularJS $scope is not the MVC Model
- Using repeating elements in AngularJS
- Filtering the data in an AngularJS ngRepeat element
- Using the AngularJS FormController to control form submission
- Creating an AngularJS Directive
- Using the DOM in an AngularJS application
- To SPA or not to SPA
Showing a list of items like in the previous post is nice but if the list is large most users appreciate the possibility to search in it. Turns out that AngularJS has that already build in so it is really simple to do.
We are using exactly the same controller as before, all it contains is a list of people.
To let the use filter the list we are going to add the AngularJS filter directive.
The change to the markup is minimal. I did change the items to be an ordered list but that is not important. The important part is adding the “| filter:filterText” to the ng-repeat directive. This filters the data in the array to containing the text in the filterText property. And the filter text is the result of the input element I added and data bound using the ng-model directive.
Nice and simple, just the way I like it 🙂