AngularJS -Filtering Results - Basic Version

In the following example, we will provide the user with a two inputs (name and last name) for them to filter our results set. In this case, we nest all our input models into one object called 'filters'. All the magic happens on the html. In our 'repeat' section, we apply a filter and we pass in our filters object. Angular will look into each object we iterate over, compare our filters.name and filters.lastName looking for model's attributes name matching 'name' and 'lastName'. If it finds those attributes, it will compare the values and add the model to our subset now displayed list of results.

    <div><h2>Filters:</h2>
    Name: <input type="text" ng-model="filters.name"/>
    Last Name: <input type="text" ng-model="filters.lastName"/>
   </div>
   <div >
     <h2>List of results:</h2>
     <div ng-repeat="person in results | filter:filters">
       {{person.name}} {{person.lastName}}
     </div>
   </div>

Note: n/a

Useful links:

• AngularJS Docs: filter

Working Example: Plunkr