Search example

Filter by and operator in AngularJs

In this post I will show you how to use && operator in AngularJs.
Example I have a students list as below:

 $scope.students = [  
       { name: 'Hai', age: 25, gender: 'boy' },  
       { name: 'Hai', age: 30, gender: 'girl' },  
       { name: 'Ho', age: 25, gender: 'boy' },  
       { name: 'Hoan', age: 40, gender: 'girl' },  
       { name: 'Hieu', age: 25, gender: 'boy' }  
     ];  

I want to filter students via gender to be boy and filter by name of them.

The first I create a function named "filterbyboy" as following:

 $scope.filterbyboy = function (genderstr) {  
       if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
         return (genderstr = "")  
       else  
        return (genderstr = "boy");  
     };  

Explaination: if not filter name then display all students else filter by input name and gender as 'boy'

Here is full HTMLcode



 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title></title>  
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  
   <script>  
   var app = angular.module('MyForm', []);  
   app.controller('myCtrl', function ($scope) {  
     $scope.filterbyboy = function (genderstr) {  
       if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
         return (genderstr = "")  
       else  
        return (genderstr = "boy");  
     };  
     $scope.students = [  
       { name: 'Hai', age: 25, gender: 'boy' },  
       { name: 'Hai', age: 30, gender: 'girl' },  
       { name: 'Ho', age: 25, gender: 'boy' },  
       { name: 'Hoan', age: 40, gender: 'girl' },  
       { name: 'Hieu', age: 25, gender: 'boy' }  
     ];  
   });  
   </script>  
 </head>  
 <body ng-app="MyForm">  
   <div ng-controller="myCtrl">  
     <h3>List students</h3>  
     <div class="container-fluid">  
       <pre>Get all students via filter name and to be boy</pre>  
       <hr />  
       <table class="table table-striped">  
         <thead>  
           <tr>  
             <th>Edit</th>  
             <th>  
               Name  
             </th>  
             <th> Age </th>  
             <th>Gender</th>  
           </tr>  
         </thead>  
         <tbody>  
           <tr>  
             <td>Filter =>></td>  
             <td> <input type="text" ng-model="search" /></td>  
             <td style="width:40px"> </td>  
             <td> </td>  
           </tr>  
           <tr ng-repeat="stud in students | filter:filterbyboy(stud.gender)|filter:search ">  
             <td>  
               <button class="btn">  
                 Edit  
               </button>  
             </td>  
             <td>{{ stud.name}}</td>  
             <td>{{ stud.age}}</td>  
             <td>{{ stud.gender}}</td>  
           </tr>  
         </tbody>  
       </table>  
     </div>  
   </div>  
 </body>  
 </html>  

Run it at Plunker via link how to use && operator in AngularJs

1 comment:

  1. PSD to WordPress conversion is one of the most important steps to lay a solid foundation of a professional WordPress powered website. For converting Photoshop to WordPress theme/ template many people hire WordPress developer. In this article, you are going to learn major advantages of a dedicated WordPress developer and some useful tips to keep in mind while hiring WordPress web developer. See more responsive landing page

    ReplyDelete

Popular Posts