AngularJS: Update ng-repeat, wenn Checkbox-Status (als Filter) durch Code geändert wird

Question

Ich habe ein Element, das von ng-repeat="item in items | filter:isselected(item)" gefüllt wird.

Für das Filter I Kontrollkästchen erstellt mit ng-model="selecteditem[$index]" und dem Filter

$scope.selectedItems = []; 
$scope.isselected = function(item) { 
    return function(i) { 
     for (var a in $scope.selectedItems) { 
      if (i.name == $scope.selectedItems[i]) return true; 
     } 
    }; 
}; 

Die Kontrollkästchen versteckt sind und in der Regel ausgelöst durch eine <label> klicken, aber ich brauche sie auch durch Code auszulösen (Ich will nur vier Kontrollkästchen gleichzeitig überprüft werden, also habe ich eine Direktive erstellt, die erfolgreich überprüft, wie viele die letzte Box aktiviert und deaktiviert, wenn es die Nummer 5 ist.
Aber leider werden der Filter und somit die ng-repeat-Elemente nicht durch Ändern der Zustände aufgefrischt, da der Filter von einer Funktion ausgewertet wird.

Also irgendwelche Ideen, wie Sie das lösen oder umgehen?

http://plnkr.co/edit/jlMnwRI3uJdQoPznBJey?p=preview

Answer 1

Also mein Kommentar Ausarbeitung aus, abgesehen von ng-click verwenden, sollten Sie denken, Dinge zu tun, die Winkel Art und Weise beginnen und so wenig jQuery wie möglich nutzen. Ihre Liste wird basierend auf dem Array selectedItems erstellt, und wenn das Kontrollkästchen attr auf false gesetzt wird, wird es nicht aus dem Array entfernt, weshalb Sie es immer noch in der lis sehen. Sehen Sie diese aktualisierte Plunkr unten.

Beachten Sie, dass die Schaltfläche jetzt ng-click verwendet und Element2 tatsächlich aus dem Array entfernt, wenn Sie auf die Schaltfläche klicken.

http://plnkr.co/edit/2mCMZkDjmFePOWcITQ4w?p=preview

Answer 2

Sie können tun dies auf eine andere Weise zu betrachten. Wenn Sie ein Kontrollkästchen für jedes Element wünschen, können Sie n ng-repeat verwenden, um die Kontrollkästchen anzuzeigen und sie an eine geprüfte Eigenschaft für jedes Element zu binden. Sie können sie dann entweder mit einem Filter für die ng-Wiederholung filtern oder eine Funktion in Ihrem Controller erstellen, die die Filterung anwendet und nur die ausgewählten Elemente zurückgibt. Hier ist, wie Sie es tun könnten.

HTML

<span ng-repeat="item in items"> 
    <!-- notice we are binding to the "checked" property of each item --> 
    <input type="checkbox" ng-model="item.checked"/>{{$index + 1}} 
</span> 

<input type="button" id="btn" value="deselect 2" ng-click="clear(1)" /> 

<p>With the filter</p> 
<ul ng-repeat="item in items | filter:isSelected(item)"> 
    <li>{{ item.name }}</li> 
    <li>{{ item.desc }}</li> 
</ul> 

<p>With a getter that does the filtering</p> 
<ul ng-repeat="item in getSelectedItems()"> 
    <li>{{ item.name }}</li> 
    <li>{{ item.desc }}</li> 
</ul> 

-Controller

 app.controller('MainCtrl', function($scope) { 
     $scope.items = [ 
      { 
       name: 'item1', 
       desc: 'desc1' 
      }, 
      { 
       name: 'item2', 
       desc: 'desc2' 
      } 
     ]; 

     $scope.selectedItems = []; 

     //use this as a filter 
     $scope.isSelected = function() { 
      return function(item) { 
       return item.checked; 
      } 
     }; 

     //clears one of the selections 
     $scope.clear = function(index) { 
      $scope.items[index].checked = false; 
     }; 

     //use this to get just the selected items 
     $scope.getSelectedItems = function() { 
      return $scope.items.filter(function(item) { 
       return item.checked; 
      }); 
     }; 


    }); 

Mit diesem Ansatz können Sie programmatisch hinzufügen/entfernen Checkboxen und aktualisieren ihre Eigenschaft checked und die Benutzeroberfläche wird automatisch aktualisiert.

Plunker: http://plnkr.co/edit/8bwmg9joQdO6lkUnLhvv?p=preview