Angular取消选中所有选定项目中的项目

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

您需要将每个项目包装到一个新对象中并放置一个选中的字段＆＃39;在这个对象上：

＆＃13;

＆＃13;

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;
      });
    };

  }
])

＆＃13;

.disabled {
  opacity: 0.5
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;