選択したすべてのアイテムの角度の選択解除アイテム

Question

以下は私のコードです。ユーザーが「すべてを選択」をクリックすると、すべての項目が選択されます。

私が望むのは、ユーザーがオプションを無効にする必要があるオプションをクリックしたときです。

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

あなたは、新しいオブジェクトに各項目をラップし、このオブジェクトに '選択された' フィールドを配置する必要があります：あなたの答えを

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>