Html Angular Checkboxes“全选”功能，最初只选择一个框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27451954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Checkboxes "Select All" functionality with only one box selected initially
提问by Cumulo Nimbus
I have a form that contains 3 checkboxes: "Select All", "Option 1", and "Option 2".
我有一个包含 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>
On the initial page load I want onlyOption 1to be checked. And then if the Select Allcheckbox gets checked it should automatically check Option 1and Option 2so all are selected.
在初始页面加载我想只选择1进行检查。然后，如果选中“全选”复选框，它应该自动选中选项 1和选项 2，以便全部选中。
The problem is on the initial page load the ng-checked="selectAll" gets evaluated which overrides my attempt to initially check only Option 1 (selectAll = false initially), so nothing is selected.
问题是在初始页面加载时 ng-checked="selectAll" 被评估，它覆盖了我最初只检查选项 1 的尝试（最初 selectAll = false），因此没有选择任何内容。
This seems like a simple problem to solve, but I can't figure out a solution... Thanks in advance for any insights or advice!
这似乎是一个要解决的简单问题，但我想不出解决方案......提前感谢您的任何见解或建议！
回答by PSL
Another way to go about it is to use a model for the options, set default selection in the model and have your controller handle the logic of doing select all.
另一种方法是为选项使用模型，在模型中设置默认选择并让您的控制器处理执行全选的逻辑。
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>回答by Dylan
I like to use an ng-repeat for clarity on showing what you're selecting/un-selecting, basically you end up with a nice little object to base it all on, and adding to it is just easier.
我喜欢使用 ng-repeat 来清楚地显示你正在选择/取消选择的内容，基本上你最终会得到一个漂亮的小对象来作为它的基础，并且添加它更容易。
Here's a Plunker
这是一个Plunker
*Also notice how you can achieve allSelected? with a loop func and not a ton of html, and I'm sure this can be done with less spaghetti but it works *
*还请注意如何实现 allSelected？使用循环函数而不是大量的 html，我相信这可以用更少的意大利面来完成，但它有效*
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;
});
}
});
回答by Josep
Try this:
尝试这个：
<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>
