Question

以下是问题的Plunker预览。

的index.html

 <body ng-controller="MainCtrl">

Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll('allSelected')"  ng-checked="allChecked"> <br> <br>

Slave1 : <input type="checkbox" id="slave1" ng-click="checkAll('slave1')" ng-checked="selectedAll" > <br>
Slave2 : <input type="checkbox" id="slave2" ng-click="checkAll('slave2')" ng-checked="selectedAll" > <br>
Slave3 : <input type="checkbox" id="slave3" ng-click="checkAll('slave3')" ng-checked="selectedAll" > <br>
Slave4 : <input type="checkbox" id="slave4" ng-click="checkAll('slave4')" ng-checked="selectedAll" > <br>
Slave5 : <input type="checkbox" id="slave5" ng-click="checkAll('slave5')" ng-checked="selectedAll" > <br>

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.checkAll = function(id) {

    // First Condition
    if (id === "allSelected" && document.getElementById(id).checked) {
     // $scope.selectedAll = false;
      $scope.allChecked = true;
      $scope.selectedAll = true;
    }

    // Second Condition
    if (id === "allSelected" && !document.getElementById(id).checked) {
      $scope.allChecked = false;
      $scope.selectedAll = false;
    }

    // Third Condition
    if (id !== "allSelected" && !document.getElementById(id).checked) {
      $scope.allChecked = false;

    }


  };
});

请参阅 First Condition 。它没有按预期工作。

我在这里上传图片是为了更好地理解这个问题。

检查第一张图像和第二张图像之间的差异。取消选中任何从属复选框后，主复选框将取消选中，但在此之后再次单击主复选框（请参阅第二个图像）时，仍然取消选中特定缓动复选框。为什么呢？

我在这做什么是错的？如何使这段代码按预期工作？

Answer 1

你以错误的方式解决这个问题。在使用ng-model存储/检索角度输入值时，我建议您在angular docs或w3schools上阅读。基本思路是，当您设置输入的ng-model时，angular本身会跟踪输入值并在更改时更新它（因此复选框上不需要id）。

尝试将您的主复选框更改为：

Master Checkbox : <input ng-change="selectAll(allSelected)" type="checkbox" ng-model="allSelected">

和其他复选框：

Slave 1: <input ng-change="unselect()" type="checkbox" ng-model="slave.selected"></br>
/// etc.

另外我想指出，当你有重复的复选框（你的例子中的奴隶复选框）时，通常你不会在html中列出它们，你会在你的控制器中创建一个数组然后只使用一个ng-repeat输出所有复选框。这是一个傻瓜：http://plnkr.co/edit/w50WALj4Y0MtVVYX5TaV?p=preview

Answer 2

我重写了你的例子：

<强> HTML：

<div ng-controller="MyCtrl">
  Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()" ng-model="masterCheckbox"> <br> <br>

    <div ng-repeat="checkbox in checkBoxes">
      {{checkbox.name}} : <input type="checkbox" id="slave5" ng-click="check(checkbox)" ng-model="checkbox.value" /> <br/>
    </div>
</div>

<强> JS：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.checkBoxes = [
        { name:'Slave1', value: false },
        { name:'Slave2', value: false },
        { name:'Slave3', value: false },
        { name:'Slave4', value: false },
        { name:'Slave5', value: false }
    ];

    $scope.checkAll = function() {
        angular.forEach($scope.checkBoxes, function(item){
            item.value = $scope.masterCheckbox;
        });
    };

    $scope.check = function() {
        var result = true;
        angular.forEach($scope.checkBoxes, function(item){
            if(!item.value) result = false;
        });
        $scope.masterCheckbox = result;
    };
}

jsfiddle example

Answer 3

<body ng-controller="MainCtrl">

Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()"  ng-model="allChecked"> <br> <br>

Slave1 : <input type="checkbox" ng-model="checboxes['slave1']"> <br>
Slave2 : <input type="checkbox" ng-model="checboxes['slave2']"> <br>
Slave3 : <input type="checkbox" ng-model="checboxes['slave3']"> <br>
Slave4 : <input type="checkbox" ng-model="checboxes['slave4']"> <br>
Slave5 : <input type="checkbox" ng-model="checboxes['slave5']"> <br>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.checkAll = function() {
    if($scope.allChecked){
      for(var i in $scope.checkboxes){
        $scope.checkboxes[i] = true;
      }
    }
  };
});

Angularjs范围变量未按预期更新

3 个答案: