如何使用angularjs中的一个复选框检查/取消选中所有其他复选框?

$scope.checkAll = function() {
  if ($scope.selectedAll) {
    $scope.selectedAll = true;
  } else {
    $scope.selectedAll = false;
  }

  angular.forEach($scope.MyProducts, function(item) {
    item.Selected = $scope.selectedAll;
  });
  /*});*/
}

<div class="panel-heading col-xs-12">
  <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />Select All</h6>
</div>

<div id="gridView" ng-repeat="product in MyProducts">

  <input style="float:left" type="checkbox" ng-model="product.Selected" ng-checked="product.Selected" value="product.ProductId" />

</div>

As I'm using two divs Since I'm trying to use one checkbox which automatically check all other checkbox but I'm unable to do so I have shared html and my controller code, please help.

因为我正在使用两个div因为我正在尝试使用一个复选框，它会自动选中所有其他的复选框，但是我做不到，所以我已经共享了html和我的控制器代码，请帮助。

2 个解决方案

#1

Here is an example how to do it. You don't need ng-checked, ng-model is sufficient to achieve what you want.

这里有一个例子。您不需要ng检查，ng模型足以实现您想要的。

angular.module("myApp", []).controller("myCtrl", function($scope) {
  $scope.myProducts = [{
    selected: false,
    productId: 1,
    name: "CheckBox1"
  }, {
    selected: false,
    productId: 2,
    name: "CheckBox2"
  }];
  $scope.selectedAll = false;
  $scope.checkAll = function() {
    $scope.myProducts.forEach(function(product) {
      product.selected = !$scope.selectedAll;
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

#2

You can use ng-change instead of ng-click for check box value change.

您可以使用ng-change代替ng-click进行复选框值更改。

In HTML:

在HTML中:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-change="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

In controller:

控制器:

$scope.checkAll = function() {
   angular.forEach($scope.myProducts, function(product) {
         product.selected = $scope.selectedAll;
   });
 };

Working PLUNKER code

工作恰好代码

#1