AngularJS provides a filter feature to format input value and an array based on certain criteria. Here, we will see the ways of array filtering.

For example-below is the array:-

$scope.movies = [

    {id: 1,title: Airlift, genre: real story, done: true, date: new Date()}  ,

    {id: 2,title: Wazir, genre: Thriller, done: true, date: new Date()}  ,

    {id: 3,title: Neerja, genre: real story, done: false, date: new Date()}  ,

    {id: 4,title: Fitoor, genre: love story, done: false, date: new Date()}  
                ];

In HTML-

<input type="text" ng-model="movies">

 <table class="table table-striped table-bordered">

 <thead>

  <tr>

   <th>#</th>

   <th>Title</th>

   <th>Genre</th>

   <th>Done?</th>

   <th>Date</th>

  </tr>

 </thead>

 <tbody>

  <tr ng-repeat=muvi in movies| filter: searchMovies">

   <td>{{$index + 1}}</td>

   <td>{{muvi.title}}</td>

   <td>{{muvi.description}}</td>

   <td>{{muvi.done}}</td>

   <td>{{muvi.date | date}}</td>

  </tr>

 </tbody>

</table>

input field’s ng-model attribute is set to searchMovies which is used to filter on the ng-repeat attribute.

Case 1- filter: searchMovies  :  this will do the search matching anything on the complete array,i.e.based on a criteria which will search on all the attributes of the array(id,genre,date,etc).

Case 2-  filter: {description: searchMovies}  : this will make the search based on the field ‘description’ on the array.

Case 3- filter: {$: searchMovies, done: false} : this will make the search on all the fields and searchMovies that are not done yet. Here, $ means all fields.

Case 4- When you need to apply filter on a nested array. What you need to do is name the input ng-model matching the target path and filter name is the root object of the path. For example you have an array-

$scope.mobiles = [

                   {id: 1, name: Asus},

                    {id: 2, name: Iphone}

                  ];

$scope.movies = [

                {id:'1', genre:original, amount: 100, mobile: $scope.mobiles[0]},

                {id:'2', genre:love story, amount: 500, mobile: $scope.mobiles[1]},

                {id:'3', genre:romcom, amount: 1200, mobile: $scope.mobiles[0]}


          ];

Using it-

<div class="col-sm-6">

            <input type="text" class="form-control" id="input1"  ng-model=egFilter.mobiles.name">

         </div>

        </div>


 </form>

 <h3> Details</h3>

 <table class="table table-striped table-bordered">

  ...

  <tbody>

            <tr ng-repeat="eg in movies| filter: egFilter">
<td>{{eg.mobiles.name}}</td>
</tbody>
</table>

In the above code we have bind the input field ng-model to "egFilter.mobiles.name" and used filter:  egFilter as filter. So eg.mobiles.name will be matched against egFilter.mobiles.name.