首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular复选框"Select All“功能,最初只选中一个框

Angular复选框"Select All“功能,最初只选中一个框
EN

Stack Overflow用户
提问于 2014-12-13 04:54:30
回答 3查看 86.4K关注 0票数 28

我有一个包含3个复选框的表单:"Select All“、”Option1“和”Option2“。

代码语言:javascript
复制
<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。然后,如果选中了Select All复选框,它将自动选中Option 1Option 2,以便全部选中。

问题是在初始页面加载时,将计算ng-checked="selectAll“,这覆盖了我最初仅检查选项1的尝试(最初selectAll= false ),因此没有选择任何内容。

这似乎是一个要解决的简单问题,但我想不出一个解决方案……提前感谢您的任何见解或建议!

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-12-13 05:20:07

另一种方法是为选项使用模型,在模型中设置默认选择,并让您的控制器处理执行全选的逻辑。

代码语言:javascript
复制
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; })
  }
});
代码语言:javascript
复制
<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>

票数 84
EN

Stack Overflow用户

发布于 2014-12-13 05:11:14

试试这个:

代码语言:javascript
复制
<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll || option1" ng-init="option1=true" ng-model="option1">Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>
票数 5
EN

Stack Overflow用户

发布于 2014-12-13 05:33:59

我喜欢使用ng-repeat来清楚地显示您正在选择/取消选择的内容,基本上您最终会得到一个很好的小对象来作为其基础,并且添加它会更容易。

这是一个

*还请注意如何实现allSelected?有一个循环函数,而不是大量的html,我确信这可以用更少的意大利面条来完成,但它是有效的*

代码语言:javascript
复制
app.controller('MainCtrl', function($scope) {

$scope.allSelected = false;

$scope.checkboxes = [{label: 'Option 1',checked: true}, {label: 'Option 2'}}}];

$scope.cbChecked = function(){
  $scope.allSelected = true;
  angular.forEach($scope.checkboxes, function(v, k) {
    if(!v.checked){
      $scope.allSelected = false;
    }
  });
}
$scope.toggleAll = function() {
    var bool = true;
    if ($scope.allSelected) {
      bool = false;
    }
    angular.forEach($scope.checkboxes, function(v, k) {
      v.checked = !bool;
      $scope.allSelected = !bool;
      });
   }
});
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27451954

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档