Question

我是新手AngularJS。我正在尝试使用以下属性创建一个复选框 1.选择并取消选中与全部复选框相对应的所有其他复选框
2.如果选择了所有 otherCheckbox ，则会自动选中所有复选框。如果 otherCheckbox 中的一个未被选中，则所有复选框都会自动取消选中。
这是视图中的代码

<div ng-repeat="fence in thisUserFence">
  <label>                                                              
    <input type="checkbox" ng-model="fence.status" ng-change="otherCheckbox()">{{fence.name}}                                  
  </label>{{fence.status}}
</div>
<div>
  <label>
    <input type="checkbox" ng-click="checkAll()" ng-model="isAllSelected">All                                                
  </label>{{isAllSelected}}
</div>

控制器中的代码 -

$scope.checkAll=function(){
  var checkStatus=!$scope.isAllSelected;
  $scope.isAllSelected=!$scope.isAllSelected;
  console.log($scope.isAllSelected);
  angular.forEach($scope.thisUserFence,function(fence){fence.status=checkStatus;});
}
$scope.otherCheckbox=function(){
  $scope.isAllSelected=$scope.thisUserFence.every(function(item){return item.status;});
  console.log($scope.isAllSelected);
}

以上逻辑工作正常，直到您选中全部复选框，然后取消选中任何 otherCheckbox 。
控制台中 $ scope.isAllSelected 的值为 false ，但 {{isAllSelected}} 的视图值为 true 。它没有在视图中更新。

Answer 1

只需像这样更改checkAll方法，就不需要在方法中更改isAllSelected的状态，因为它已经绑定到复选框模型

    $scope.checkAll=function(){
        angular.forEach($scope.thisUserFence,function(fence) {
                fence.status=$scope.isAllSelected;
                });
          }

请参阅此处的工作示例https://jsfiddle.net/Lt7aP/7426/

视图上的数据不与控制器绑定

1 个答案: