Angular unselect Element in allen ausgewählten Artikeln

Question

Unten ist mein Code. Wenn der Benutzer auf "Alle auswählen" klickt, werden alle Elemente ausgewählt.

was ich will ist, wenn Benutzer auf eine Option klicken, sollte diese Option deaktiviert werden.

var app = angular.module('sampleApp', []); 
 
app.controller('sampleController', ['$scope', 
 
    function($scope) { 
 
    $scope.selectAll = false; 
 

 
    } 
 
])

.disabled { 
 
    opacity: 0.5 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    <label ng-click="selectAll = !selectAll">Select all</label> 
 
    <div ng-class="selectAll ? 'enable' : 'disabled'">Option 1</div> 
 
    <div ng-class="selectAll ? 'enable' : 'disabled'">Option 2</div> 
 
    <div ng-class="selectAll ? 'enable' : 'disabled'">Option 3</div> 
 
    <div ng-class="selectAll ? 'enable' : 'disabled'">Option 4</div> 
 
    </div> 
 
</div>

Answer 1

Sie müssen jedes Element in ein neues Objekt wickeln und ein Feld 'ausgewählt' auf dieses Objekt platzieren:

var app = angular.module('sampleApp', []); 
 
app.controller('sampleController', ['$scope', 
 
    function($scope) { 
 
    $scope.options = [{ 
 
     selected: false, 
 
     item: 'option 1' 
 
    }, { 
 
     selected: false, 
 
     item: 'option 2' 
 
    }, { 
 
     selected: false, 
 
     item: 'option 3' 
 
    }] 
 

 
    $scope.selectAll = function(select) { 
 
     angular.forEach($scope.options, function(o) { 
 
     o.selected = select; 
 
     }); 
 
    }; 
 

 
    } 
 
])

.disabled { 
 
    opacity: 0.5 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    <label ng-click="selectAll(true)">Select all</label> 
 
    <label ng-click="selectAll(false)">Deselect all</label> 
 
    <div ng-repeat="option in options" ng-class="{'disabled': !option.selected}" ng-click="option.selected = !option.selected">{{option.item}}</div> 
 
    </div> 
 
</div>