Угловой фильтр 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/> 

Обратите внимание, что я обновил элемент, чтобы иметь «выбранный» поле, которое будет сказать, если этот пункт выбран или нет (default может быть ложным). При создании флажка я связала модель с использованием нг-модели = item.selected Изменена скрипкой в ​​http://jsfiddle.net/3a3zD/194/

Answer 2

Try добавить нг-модель = «item.selected» на свой CheckBox тег

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

Works для меня, надеюсь, это поможет.