所有选定项目中的角度取消选择项目

Question

Below is my code. When user clicks on "select all" all items get selected.

what I want is when user click on any option that option should be disabled.

 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

You need to wrap each item into a new object and place a field 'selected' on this object:

 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>