I know that jquery can operate the dom to check and then obtain it. But I just learned angularjs and I don’t know much about it. As follows:
This is in thead
<td><input type="checkbox" ng-model="selectAll">
This is on tbody:
<td><input ng-checked="selectAll" value="{{ x.id }}" name="beDel" type="checkbox"/></td>
This is the icon:
My question is: How to determine whether these checkboxes are selected and put the selected values ??into a collection?
Teach me if you are proficient in angularjs.
閉關(guān)修行中......
I just have experience, so let me think about it differently:
1: The select all button is a checkbox, and the other sub-buttons are lists of multiple checkboxes;
2: The checkbox of the sub-button is also bound to the checked value of the object when repeating (the default is / Does not exist/i.e. flase/i.e. not selected)
3: Add two extension methods to the array
(1):// 設(shè)置元素及子元素的選擇狀態(tài)(可關(guān)聯(lián)自身所有子級)
Array.prototype.setCheck = function (value, children) {
var set_check = function (main) {
for (var i = 0; i < main.length; i++) {
main[i].checked = value;
if (children && main[i][children]) {
set_check(main[i][children]);
}
}
};
set_check(this);
};
(2):// 將元素中所有級別子元素中被選中的元素的id打包為一個數(shù)組
Array.prototype.checked = function (children, id_key) {
var ids = [];
var find_check;
if (arguments.length < 2) {
find_check = function (main) {
for (var i = 0; i < main.length; i++) {
if (main[i].checked) {
ids.push(main[i].id);
};
if (!!children && main[i][children]) {
find_check(main[i][children]);
}
}
};
} else {
find_check = function (main) {
for (var i = 0; i < main.length; i++) {
if (main[i].checked) {
ids.push(main[i][id_key]);
};
if (!!children && main[i][children]) {
find_check(main[i][children]);
}
}
};
};
find_check(this);
return ids;
};
4: Bind the extension event (1) to the select all button, and use the extension event (2) to get the id of the selected element
Demo:
// js
$scope.list = [
{
id: 1,
children: [...]
}, {
id: 2,
children: [...]
},
...
];
< !-- html/check-all -- >
<label>
<input class="check-all"
type="checkbox"
ng-model="check_all"
ng-change="list.setCheck(check_all, 'children')">
<span></span>
</label>
< !-- html/check-item -- >
<li class="checkbox" ng-repeat="item in list">
<label>
<input type="checkbox"
name="item[{{ $index }}]"
ng-model="item.checked"
ng-change="item.children.setCheck(item.checked, 'children')">
< !-- 如果是只有一級數(shù)據(jù)的話,此處無需再綁定自身子級 -- >
</label>
</li>
Get the selected value:
// 一級數(shù)據(jù)
$scope.checked_ids = $scope.list.checked(); // return [1,32,4,...]
// 多級別數(shù)據(jù)
$scope.checked_ids = $scope.list.checked('children'); // return [1,32,4,...]
// 如果需要轉(zhuǎn)字符串
$scope.checked_ids = $scope.list.checked('children').join(','); // return "1,32,4"
http://stackoverflow.com/questions/12648466/how-can-i-get-angular-js-checkboxes-with-select-unselect-all-functionality-and-i
http://stackoverflow.com/questions/14514461/how-to-bind-to-list-of-checkbox-values-with-angularjs