Angular: Zeigt nur überprüfte Elemente in einer Checkbox-Liste an

Question

Ist es möglich, nur eine Liste der überprüften Elemente in einer Checkbox-Liste anzuzeigen?

Was ich tun möchte, ist ein paar Punkte auf karierte Liste auswählen und wenn ich drücke „Nur markierte Objekte“, ich zwischen zeigen nur die markierten Elemente in der Checkbox-Liste und zeigen die gesamte Liste wechseln will mit den überprüften Artikeln.

Ich suchte Winkel Website aber war nicht in der Lage, eine Lösung zu finden.

Fiddle: http://jsfiddle.net/fjoLy5sq/422/

<div ng-controller="DemoCtrl"> 
    <label ng-repeat="role in roles"> 
    <input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}} 
    </label> 
    <br> 
    <button ng-click="checkAll()">check all</button> 
    <button ng-click="uncheckAll()">uncheck all</button> 
    <button ng-click="checkFirst()">check first</button> 
    <button ng-click="checkFirst()">Show only Checked</button> 
    <br><br> 
    user.roles {{ user.roles | json }} 
</div> 

Javascript:

angular.module("DemoApp", ["checklist-model"]) 
.controller('DemoCtrl', function($scope) { 
$scope.roles = [ 
    {id: 1, text: 'guest'}, 
    {id: 2, text: 'user'}, 
    {id: 3, text: 'customer'}, 
    {id: 4, text: 'admin'} 
    ]; 
    $scope.user = { 
    roles: [2, 4] 
    }; 
    $scope.checkAll = function() { 
    $scope.user.roles = $scope.roles.map(function(item) { return item.id; }); 
    }; 
    $scope.uncheckAll = function() { 
    $scope.user.roles = []; 
    }; 
    $scope.checkFirst = function() { 
    $scope.user.roles.splice(0, $scope.user.roles.length); 
    $scope.user.roles.push(1); 
    }; 

}); 

Answer 1

eine neue Variable in der Steuerung hinzufügen:

$scope.showAll = true; 

In Hinblick inversen der Wert showAll wenn Zeige nur Checked Schaltfläche ist klicken ed:

<button ng-click="showAll = !showAll">Show only Checked</button> 

nur Prüfpunkte Um zu zeigen, Array.includes Methode verwenden, und prüfen Sie in user.roles dass aktuelle Rolle ist:

<label ng-repeat="role in roles" ng-if="user.roles.includes(role.id)"> 
    <input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}} 
</label> 

Working demo