搜尋

首頁  >  問答  >  主體

angular.js - angularjs如何偵測多個是否被選中,並收集其所在行資料的id

我知道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教一下。

阿神阿神2780 天前735

全部回覆(2)我來回復

  • 某草草

    某草草2017-05-15 17:03:07

    剛好有經驗,換個思路:
    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"

    回覆
    0
  • 習慣沉默

    習慣沉默2017-05-15 17:03:07

    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

    回覆
    0
  • 取消回覆