angular.js - Bagaimanakah angularjs mengesan sama ada berbilang item dipilih dan mengumpul id data baris di mana ia berada?

Question

Saya tahu bahawa jquery boleh mengendalikan dom untuk menyemak dan kemudian mendapatkannya. Tetapi saya baru belajar angularjs dan saya tidak tahu banyak tentangnya. Seperti berikut: Ini ada dalam iklan

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

Ini pada badan:

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

Ini ialah ikon: Soalan saya ialah: Bagaimana untuk menentukan sama ada kotak pilihan ini dipilih dan meletakkan nilai yang dipilih ke dalam koleksi? Ajar saya jika anda mahir dalam angularjs.

Answer 1

Saya hanya mempunyai pengalaman, jadi izinkan saya mengubah fikiran saya:
1: Butang pilih semua ialah kotak pilihan dan sub-butang lain ialah senarai berbilang kotak pilihan sub-butang juga terikat pada objek ulangan yang diperiksa (lalai adalah/tidak wujud/flase/tidak dipilih)
3: Tambahkan dua kaedah sambungan pada tatasusunan

（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: Ikat acara sambungan (1) pada butang pilih semua dan gunakan acara sambungan (2) untuk mendapatkan id elemen yang dipilih

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>

Dapatkan nilai yang dipilih:

// 一级数据
$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-functionality-and-i

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