国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

angular.js - angularjs如何檢測多個是否被選中,并收集其所在行數(shù)據(jù)的id
阿神
阿神 2017-05-15 17:01:07
[AngularJS討論組]

我知道jquery可以操作dom去檢查,然后獲取。但是angularjs剛學(xué),不怎么會。如下:
這是在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教一下。

阿神
阿神

閉關(guān)修行中......

全部回復(fù)(2)
某草草

正好有經(jīng)驗,換個思路:
1:全選按鈕為一個checkbox,其他的子按鈕為多個checkbox的列表;
2:子按鈕的checkbox同樣綁定repeat時的對象的checked值(默認(rèn)是/不存在/即flase/即未選中)
3:給數(shù)組增加兩個擴(kuò)展方法

(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:給全選按鈕綁定擴(kuò)展事件(1),使用擴(kuò)展事件(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')"> 
               < !-- 如果是只有一級數(shù)據(jù)的話,此處無需再綁定自身子級 -- >
     </label>
</li>

獲取已選中值:

// 一級數(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"
習(xí)慣沉默

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

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號