angular.js - angularjs如何检测多个是否被选中,并收集其所在行数据的id

【字号: 日期:2023-01-15浏览:24作者:雯心

问题描述

我知道jquery可以操作dom去检查,然后获取。但是angularjs刚学,不怎么会。如下:这是在thead的

<td><input type='checkbox' ng-model='selectAll'>

这是在tbody的:

<td><input ng-checked='selectAll' value='{{ x.id }}' name='beDel' type='checkbox'/></td>

这是图示:angular.js - angularjs如何检测多个是否被选中,并收集其所在行数据的id

我的问题是:怎么判断这些checkbox的选中,并且把选中的value值放到一个集合中去?

精通angularjs教一下。

问题解答

回答1:

正好有经验,换个思路:1:全选按钮为一个checkbox,其他的子按钮为多个checkbox的列表;2:子按钮的checkbox同样绑定repeat时的对象的checked值(默认是/不存在/即flase/即未选中)3:给数组增加两个扩展方法

(1):// 设置元素及子元素的选择状态(可关联自身所有子级) 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打包为一个数组 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:给全选按钮绑定扩展事件(1),使用扩展事件(2)来获取已选中的元素的id

Demo:

// js$scope.list = [ {id: 1,children: [...] }, {id: 2,children: [...] }, ...];< !-- html/check-all -- ><label> <input type='checkbox' ng-model='check_all' ng-change='list.setCheck(check_all, ’children’)'> <span></span></label>< !-- html/check-item -- ><li ng-repeat='item in list'> <label><input type='checkbox'name='item[{{ $index }}]'ng-model='item.checked' ng-change='item.children.setCheck(item.checked, ’children’)'>< !-- 如果是只有一级数据的话,此处无需再绑定自身子级 -- > </label></li>

获取已选中值:

// 一级数据$scope.checked_ids = $scope.list.checked(); // return [1,32,4,...]// 多级别数据$scope.checked_ids = $scope.list.checked(’children’); // return [1,32,4,...]// 如果需要转字符串$scope.checked_ids = $scope.list.checked(’children’).join(’,’); // return '1,32,4'回答2:

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

相关文章: