Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Different ways of using array filters in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 163
    Comment on it

    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 2filter: {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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: