角度复选框的“全选”功能，最初仅选择了一个复选框

一尘不染

角度复选框的“全选”功能，最初仅选择了一个复选框

angularjs

我有一个包含3个复选框的表单：“ 全选 ”，“ 选项1 ”和“ 选项2 ”。

<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll" checked>Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>

在初始页面加载中，我只希望检查 选项1 。然后，如果 选中了“全选” 复选框，则它应自动选中 选项1 和 选项2，
以便全部选中。

问题是在初始页面加载时对ng-checked =“ selectAll”进行评估，这将覆盖我最初仅检查选项1的尝试（最初selectAll =
false），因此未选择任何内容。

这似乎是一个简单的问题，但我无法解决。…在此先感谢您的见解或建议！

阅读 260

2020-07-04

共1个答案

一尘不染

解决该问题的另一种方法是对选项使用模型，在模型中设置默认选择，然后让控制器处理全选的逻辑。

angular.module("app", []).controller("ctrl", function($scope){



  $scope.options = [

    {value:'Option1', selected:true},

    {value:'Option2', selected:false}

  ];



  $scope.toggleAll = function() {

     var toggleStatus = !$scope.isAllSelected;

     angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; });



  }



  $scope.optionToggled = function(){

    $scope.isAllSelected = $scope.options.every(function(itm){ return itm.selected; })

  }

});


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">    </script>

<div ng-app="app" ng-controller="ctrl">

<form id="selectionForm">

    <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all

    <br>

     <div ng-repeat = "option in options">

        <input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}

     </div>

</form>

  {{options}}

</div>

2020-07-04