lundi 12 décembre 2016

Angular JS filter Search

I want to retain the selected check boxes as is even when I am changing my search query. Initially I am posting some query in search and selecting one of the resulted values, Now if I change my search query, then New values will be my result. But I want to retain the checkbox selected for the previous values...

`

//Demo of Searching and Sorting Table with AngularJS
var myApp = angular.module('myApp',[]);
  
 myApp.controller('TableCtrl', ['$scope', function($scope) {  
    
    $scope.allItems = getDummyData(); 
      
     $scope.resetAll = function()
     {
         $scope.filteredList = $scope.allItems ; 
         $scope.newEmpId = '';
         $scope.newName = '';
         $scope.newEmail = '';
         $scope.searchText = ''; 
     }
     
     
     $scope.add = function()
     {
         $scope.allItems.push({EmpId : $scope.newEmpId, name : $scope.newName, Email:$scope.newEmail});
         $scope.resetAll();  
     }
     
     
    $scope.search = function()
    { 
        $scope.filteredList  = _.filter($scope.allItems,
                 function(item){  
                     return searchUtil(item,$scope.searchText); 
                 });
        
        if($scope.searchText == '')
        {
            $scope.filteredList = $scope.allItems ;
        }
    }  
    
    $scope.resetAll();       
}]);
 
/* Search Text in all 3 fields */
function searchUtil(item,toSearch)
{
    /* Search Text in all 3 fields */
    return ( item.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.Email.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.EmpId == toSearch
                            )                              
                     ? true : false ;
}

/*Get Dummy Data for Example*/
function getDummyData()
{
    return [
         {EmpId:2, name:'Jitendra', Email: 'jz@gmail.com'},
         {EmpId:1, name:'Minal', Email: 'amz@gmail.com'},
         {EmpId:3, name:'Rudra', Email: 'ruz@gmail.com'} 
        ];
}
.icon-search{margin-left:-25px;}
<br /> <br />

<div ng-app="myApp"> 
    <div ng-controller="TableCtrl"> 
        
        <div class="input-group">
  <input class="form-control"   ng-model="searchText" placeholder="Search" type="search" ng-change="search()" />
  <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
  </span>
</div>
             
        <table class="table  table-hover data-table sort display">
             <thead>
                 <tr>
                     <th class="EmpId"> <a href="" ng-click="columnToOrder='EmpId';reverse=!reverse">EmpId 
                          
                         </a></th>
                     <th class="name"> <a href="" ng-click="columnToOrder='name';reverse=!reverse"> Name </a> </th>
                 <th class="Email"> <a href="" ng-click="columnToOrder='Email';reverse=!reverse"> Email </a> </th>
                     
                 </tr>
             </thead> 
             <tbody>
                 
                 <tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
                     <td><input type="checkbox" name="test" /></td>
                     <td></td>
                     <td></td>
                 </tr>
             </tbody>
        </table>
         
        
<div class="row">
  <div class="col-xs-3">
    <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">
  </div>
  <div class="col-xs-3">
    <input type="text" ng-model="newName" class="form-control" placeholder="Name">
  </div>
  <div class="col-xs-4">
    <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">
  </div> 
     <div class="col-xs-1">
         <button ng-click="add()" type="button" class="btn btn-primary">
              <span class="glyphicon glyphicon-plus"></span>
        </button> 
      </div> 
</div>

        
        
    </div> <!-- Ends Controller -->
 
    </div>

`Fiddle




Aucun commentaire:

Enregistrer un commentaire