Angular JS过滤器搜索

Question

即使在我更改我的搜索查询时，我想保留选中的复选框。最初，我在搜索 中发布了一些查询并选择了一个结果值，现在，如果我更改了搜索 查询，那么新值将是我的结果。但我想保留选择前面值 复选框...

`

//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" />{{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

Answer 1

看起来像这种情况正在发生，因为你是重置项目：

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

和allItems不会告诉任何地方如果复选框需要被选中。我建议你更新你在哪里创建的复选框的代码，类似：

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

请注意，我已经更新有一个“选择”字段如果选择或没有该项目，这将告诉（项目默认可能是假的）。在创建我一直在使用NG-模型链接模型中的复选框= item.selected 更新小提琴在http://jsfiddle.net/3a3zD/194/

Answer 2

尝试NG-模型=“item.selected”添加到您的复选框标签

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

厂对我而言，希望它有所帮助。