Angular JS Filter Suche

Question

Ich möchte die ausgewählten Kontrollkästchen beibehalten, auch wenn ich bin meine Suchanfrage ändern. Anfangs schreibe ich eine Abfrage in der Suche und Auswahl eines der resultierenden Werte, jetzt, wenn ich meine Suche Abfrage ändern, dann werden neue Werte mein Ergebnis sein. Aber ich will das Checkbox für die vorherigen Werte ...

`

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

ausgewählt behalten Sieht aus wie dies geschieht, weil Sie Zurücksetzen der Elemente hier:

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

und allItems sagt nicht überall, wenn das Kontrollkästchen auf nicht ausgewählt werden muss. Ich würde Sie vorschlagen, um den Code zu aktualisieren, wenn Sie die Kontrollkästchen erstellen, so etwas wie:

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

Bitte beachten, dass ich den Artikel aktualisiert habe ‚ausgewählt‘ Feld zu haben, die sagen werden, wenn das Element ausgewählt ist oder nicht (Standard könnte falsch sein). Während das Kontrollkästchen Erstellen ich das Modell mit ng-Modell verknüpft habe = item.selected Aktualisiert Geige bei http://jsfiddle.net/3a3zD/194/

Answer 2

Try ng-Modell = "item.selected", um Ihren Checkbox Tag

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

Works hinzufügen für mich, hoffe es hilft.