Filtering the data in an AngularJS ngRepeat element

Index:

  1. Getting started with AngularJS
  2. Creating an AngularJS Controller
  3. The AngularJS $scope is not the MVC Model
  4. Using repeating elements in AngularJS
  5. Filtering the data in an AngularJS ngRepeat element
  6. Using the AngularJS FormController to control form submission
  7. Creating an AngularJS Directive
  8. Using the DOM in an AngularJS application
  9. 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.

   1: function DemoCtrl($scope) {

   2:  

   3:     $scope.people = [

   4:         { firstName: 'Maurice', lastName: 'de Beijer' },

   5:         { firstName: 'Jacob', lastName: 'Smith' },

   6:         { firstName: 'Sophia', lastName: 'Brown' },

   7:         { firstName: 'Mason', lastName: 'Lee' },

   8:         { firstName: 'Emma', lastName: 'Wilson' },

   9:         { firstName: 'Ethan', lastName: 'Martin' },

  10:         { firstName: 'Emily', lastName: 'Taylor' },

  11:         { firstName: 'Wiliam', lastName: 'Wong' },

  12:         { firstName: 'Emily', lastName: 'Campbell' },

  13:         { firstName: 'Liam', lastName: 'Williams' }

  14:     ];

  15: }

 

To let the use filter the list we are going to add the AngularJS filter directive.

image

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.

 

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     Search:

   9:     <input type="text" ng-model="filterText" autofocus />

  10:  

  11:     <ol>

  12:         <li ng-repeat="person in people | filter:filterText">

  13:             {{person.firstName}} {{person.lastName}}

  14:         </li>

  15:     </ol>

  16:  

  17:     <script src="Scripts/angular.js"></script>
   1:  

   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  18: </body>

  19: </html>


 


Nice and simple, just the way I like it :-)

One thought on “Filtering the data in an AngularJS ngRepeat element

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>