Question

我希望保留所选的复选框，即使我是更改我的搜索查询。最初我在搜索中发布一些查询并选择其中一个结果值，现在如果我更改我的搜索查询，然后新值将是我的结果。但我想留住为先前的值选择的复选框...

`

＆＃13;

//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'} 
        ];
}

＆＃13;

.icon-search{margin-left:-25px;}

＆＃13;

<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>

＆＃13;

`Fiddle

Answer 1

尝试添加ng-model =＆＃34; item.selected＆＃34;到你的复选框标签

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

适合我，希望有所帮助。

Answer 2

看起来这种情况正在发生，因为您正在重置这些项目：

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

如果需要选中复选框，

并且allItems不会告诉任何地方。我建议你更新创建复选框的代码，例如：

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

请注意，我已更新该项目，以便选择＆＃39;将判断是否选择该项目的字段（默认值可能为false）。在创建复选框时，我使用ng-model = item.selected链接了模型在http://jsfiddle.net/3a3zD/194/

更新了小提琴

Angular JS过滤搜索

2 个答案: