Angular复选框"Select All“功能，最初只选中一个框
Angular复选框"Select All“功能，最初只选中一个框
提问于 2014-12-13 04:54:30
我有一个包含3个复选框的表单："Select All“、”Option1“和”Option2“。
<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 1和Option 2，以便全部选中。
问题是在初始页面加载时，将计算ng-checked="selectAll“，这覆盖了我最初仅检查选项1的尝试(最初selectAll= false )，因此没有选择任何内容。
这似乎是一个要解决的简单问题，但我想不出一个解决方案……提前感谢您的任何见解或建议！
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-12-13 05:20:07
另一种方法是为选项使用模型，在模型中设置默认选择，并让您的控制器处理执行全选的逻辑。
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>
Stack Overflow用户
发布于 2014-12-13 05:11:14
试试这个：
<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>Stack Overflow用户
发布于 2014-12-13 05:33:59
我喜欢使用ng-repeat来清楚地显示您正在选择/取消选择的内容，基本上您最终会得到一个很好的小对象来作为其基础，并且添加它会更容易。
这是一个
*还请注意如何实现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;
});
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27451954
复制相关文章
相似问题
腾讯云开发者
