Angular JS filter Search

Question

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: '[email protected]'},
         {EmpId:1, name:'Minal', Email: '[email protected]'},
         {EmpId:3, name:'Rudra', Email: '[email protected]'} 
        ];
}

.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" />{{item.EmpId}}</td>
                     <td>{{item.name}}</td>
                     <td>{{item.Email}}</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

Try to add the ng-model="item.checked" in the checkbox inside the repeater — Raj
– Raj, Commented Dec 13, 2016 at 7:58

Vermicello · Accepted Answer · 2016-12-13 08:11:40Z

1

Try to add ng-model="item.selected" to your checkbox tag

<td><input ng-model="item.selected" type="checkbox" name="test" />{{item.EmpId}}</td>

Works for me, hope it helps.

answered Dec 13, 2016 at 8:11

Vermicello

3081 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anurag Sinha · Accepted Answer · 2016-12-13 08:03:29Z

0

Looks like this is happening because you are resetting the items here:

if($scope.searchText == '')
    {
        $scope.filteredList = $scope.allItems ;
    }

and allItems doesn't tell anywhere if the checkbox needs to be selected on not. I would suggest you to update the code where you are creating the checkboxes, something like:

<td><input type="checkbox" name="test" ng-model=item.selected ng-checked=item.selected/>

Note that I have updated the item to have a 'selected' field which will tell if that item is selected or not(default could be false). While creating the checkbox I have linked the model using ng-model=item.selected Updated fiddle at http://jsfiddle.net/3a3zD/194/

answered Dec 13, 2016 at 8:03

Anurag Sinha

1,03210 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular JS filter Search

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related