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

Question

我知道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>

这是图示： 我的问题是：怎么判断这些checkbox的选中，并且把选中的value值放到一个集合中去？ 精通angularjs教一下。

Answer 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 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')"> 
               < !-- 如果是只有一级数据的话，此处无需再绑定自身子级 -- >
     </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"

Answer 2

http://stackoverflow.com/questions/12648466/how-can-i-get-angular-js-checkboxes-with-select-unselect-all-function性-and-i

http://stackoverflow.com/questions/14514461/how-to-bind-to-list-of-checkbox-values-with-angularjs