javascript - 选择所有三态复选框的问题
问题描述
我有一个复选框列表 - 两个父母,每个父母有 5 个孩子。父母应该有 3 种状态(选中、未选中、不确定)。现在,我的代码正在运行,但我正在尝试添加一个“全选”复选框,它将选择两个父母和他们所有的孩子。
我试图做的是在上面再添加一个标签:
<label>
<input type="checkbox" data-indeterminate-checkbox data-child-
list="model.people" data-property="eaten" data-ng-
model="model.allEaten"> All eaten
</label>
但它不起作用 - 复选框未按预期运行。
完整代码:http: //jsfiddle.net/wnjze03h/210/
HTML:
var app = angular.module('combo', []);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.model = {
allEaten: false,
people: [
{
name: "Bob",
fruits: [
{ type: 'Apple', eaten: false },
{ type: 'Banana', eaten: false },
{ type: 'Pear', eaten: true },
{ type: 'Tomato', eaten: false },
{ type: 'Grapefruit', eaten: true },
]
},
{
name: "Joe",
fruits: [
{ type: 'Apple', eaten: true },
{ type: 'Banana', eaten: true },
{ type: 'Pear', eaten: true },
{ type: 'Tomato', eaten: true },
{ type: 'Grapefruit', eaten: true },
]
}
]
};
}]);
/**
* Directive for an indeterminate (tri-state) checkbox.
* Based on the examples at http://stackoverflow.com/questions/12648466/how-can-i-get-angular-js-checkboxes-with-select-unselect-all-functionality-and-i
*/
app.directive('indeterminateCheckbox', [function() {
return {
scope: true,
require: '?ngModel',
link: function(scope, element, attrs, modelCtrl) {
var childList = attrs.childList;
var property = attrs.property;
// Bind the onChange event to update children
element.bind('change', function() {
scope.$apply(function () {
var isChecked = element.prop('checked');
// Set each child's selected property to the checkbox's checked property
angular.forEach(scope.$eval(childList), function(child) {
child[property] = isChecked;
});
});
});
// Watch the children for changes
scope.$watch(childList, function(newValue) {
var hasChecked = false;
var hasUnchecked = false;
// Loop through the children
angular.forEach(newValue, function(child) {
if (child[property]) {
hasChecked = true;
} else {
hasUnchecked = true;
}
});
// Determine which state to put the checkbox in
if (hasChecked && hasUnchecked) {
element.prop('checked', false);
element.prop('indeterminate', true);
if (modelCtrl) {
modelCtrl.$setViewValue(false);
}
} else {
element.prop('checked', hasChecked);
element.prop('indeterminate', false);
if (modelCtrl) {
modelCtrl.$setViewValue(hasChecked);
}
}
}, true);
}
};
}]);
.person {
margin-bottom: 20px;
}
.child-list {
margin-left: 20px;
}
<label>
<input type="checkbox" data-indeterminate-checkbox data-child-list="model.people.allEaten" data-property="eaten" data-ng-model="model.allEaten"> All eaten
</label>
<div data-ng-repeat="person in model.people" class="person">
<label>
<input type="checkbox" data-indeterminate-checkbox data-child-list="person.fruits" data-property="eaten" data-ng-model="person.allEaten"> {{person.name}} [All eaten: {{person.allEaten}}]
</label>
<div data-ng-repeat="fruit in person.fruits" class="child-list">
<label>
<input type="checkbox" data-ng-model="fruit.eaten"> {{fruit.type}}
</label>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
解决方案
删除您的指令并添加以下 html
<label>
<input style="-webkit-appearance:checkbox" type="checkbox" ng-model="model.allEaten" ng-click="selectAllEaten(model.allEaten)">
allEaten {{model.allEaten}}
</label>
<div ng-repeat="person in model.people">
<label>
<input style="-webkit-appearance:checkbox" ng-checked="person.selected" type="checkbox" ng-model="person.selected" ng-click="selectByPerson(person)">
{{person.name}}
</label>
<div ng-repeat="fruit in person.fruits" style="margin-left:20px;">
<label>
<input style="-webkit-appearance:checkbox" ng-checked="fruit.selected" type="checkbox" ng-model="fruit.eaten">
{{fruit.type}}
</label>
</div>
</div>
并在控制器中
$scope.selectAllEaten = function (x) {
if (x) {
$scope.model.people.forEach(function (item) {
item.selected = true;
item.fruits.forEach(function (fruit) { fruit.selected = true; });
});
} else {
$scope.model.people.forEach(function (item) {
item.selected = false;
item.fruits.forEach(function (fruit) { fruit.selected = false; });
});
}
}
$scope.selectByPerson = function(x){
if (x.selected) {
x.fruits.forEach(function (fruit) { fruit.selected = true; });
}else{
x.fruits.forEach(function (fruit) { fruit.selected = false; });
}
}
做进一步的验证,例如检查父母是否检查了所有孩子等
推荐阅读
- css - Azure 中的自定义样式表不起作用,但在本地计算机上可以正常工作
- python - 用索引列表替换 3d Numpy 数组的多个值
- python - 错误:无法为使用 PEP 517 且无法直接安装的 multidict、yarl 构建轮子
- python - Pandas read_html 无法正确读取文本
- raphael - 如何在创建时将 ID 添加到 Raphael JS 元素
- bash - Bash 按列对列表进行排序
- sql - 如何拆分 2 个字符串并插入到 2 列
- node.js - 执行时更改事件参数
- spring - Spring-Data-Cassandra SchemaAction 不起作用
- shell - 如何在本机 POSIX shell 脚本中乘以一个字符或字符串?