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> 

廠對我而言，希望它有所幫助。