快捷導(dǎo)航

angularjs實(shí)現(xiàn)多選框分段全選效果實(shí)現(xiàn)

更新時(shí)間：2023年06月30日 09:57:12 作者：Skywang

這篇文章主要為大家介紹了angularjs實(shí)現(xiàn)多選框分段全選效果實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

angularjs 實(shí)現(xiàn)多選框分段全選效果

在前臺開發(fā)過程中，列表批量選擇是一個(gè)開發(fā)人員經(jīng)常遇到的功能，列表批量選擇的實(shí)現(xiàn)方式很多，但是原理基本相同，本文主要來講AngularJs如何簡單的實(shí)現(xiàn)列表批量選擇功能。

效果如下

html代碼

<div class="form-group1" style="margin-top: 15px;">
  <div class="input-group">
     <div class="input-group-addon no-border" style="padding-left: 0px;float: left;">
        <p>角色權(quán)限：</p>
    </div>
  </div>
</div>
<div class="" ng-repeat="todotype in todolist" style="margin-bottom: 30px;">
  <div class="" style="display: flex;">
    <div class="" style="background-color: rgb(229,172,78);width: 10%;padding: 1px 5px;line-height: 25px;height: 28px;">
      <input style="margin-bottom: 8px;" type="checkbox" ng-model="$parent.selectAll[$index]" ng-click="changeAll($index)" />
        <span style="color: white;font-weight: 600;">
        {{todotype.type}} 
        </span>
      </div>
  <div class="" style="padding-left: 24px;width: 100%;">
    <div class="row">
      <div class="col-md-2 col-sm-2" ng-repeat="obj in todolist[$index].permissionList" style="margin-bottom: 10px;">
        <input type="checkbox" ng-click="funcChange($parent.$index)" ng-model="obj.isSelected" /> 
          <span style="line-height: 25px;">{{obj.name}}</span>                          
      </div>
     </div>
    </div>
  </div>
</div>

html里面簡單建立一個(gè)表格，與批量選擇相關(guān)的只有兩處。

一處是ng-click="changeAll($index)，用來做全選的操作;

ng-click="funcChange($parent.$index)"用來判斷當(dāng)前大類里內(nèi)容是否被全選。

判斷是否全選是用ng-model進(jìn)行判斷第一處ng-model="$parent.selectAll[$index]"是判斷這一大類是否全選；

ng-model="obj.isSelected"是判斷每一大類的每一項(xiàng)的選擇；

控制器里的代碼js文件

// 獲取數(shù)據(jù) 這里具體post請求就不寫了 
                   $scope.todolist = res.data.data;
                        for(var i = 0; i < $scope.todolist.length; i++) {
                            angular.forEach($scope.todolist[i].permissionList, function(i) {
                                i.isSelected = false;
                            })
                        }
// 數(shù)據(jù)類型如下
    $scope.list = [{
                permissionList: [{
                        name: 'Golde',
                        //                  birthday: '2000-01-10',
                        isSelected: false
                    },
                    {
                        name: 'King',
                        //                  birthday: '1990-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Mark',
                        //                  birthday: '19890-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Marie',
                        //                  birthday: '2010-01-10',
                        isSelected: false
                    }
                ],
                type: "制造資源管理"
            }, {
                permissionList: [{
                        name: 'Golde1',
                        //                  birthday: '2000-01-10',
                        isSelected: false
                    },
                    {
                        name: 'King1',
                        //                  birthday: '1990-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Mark1',
                        //                  birthday: '19890-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Marie1',
                        //                  birthday: '2010-01-10',
                        isSelected: false
                    }
                ],
                type: "制造資源管理2"
            }, {
                permissionList: [{
                        name: 'Golde2',
                        //                  birthday: '2000-01-10',
                        isSelected: false
                    },
                    {
                        name: 'King2',
                        //                  birthday: '1990-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Mark2',
                        //                  birthday: '19890-01-10',
                        isSelected: false
                    },
                    {
                        name: 'Marie2',
                        //                  birthday: '2010-01-10',
                        isSelected: false
                    }
                ],
                type: "制造資源管理3"
            }];
// 具體方法如下所示
       // 這里初始化數(shù)組 上來全為空
             $scope.selectAll = [];
            //      對于對象進(jìn)行操作的時(shí)候(點(diǎn)擊)，會執(zhí)行funcChange  
            //      判斷對象數(shù)組中isSelected 是否為 true或false，在決定select是否為true  
            $scope.changeAll = function(index) { //全選/取消全選      
                angular.forEach($scope.todolist[index].permissionList, function(v, k) {
                    v.isSelected = $scope.selectAll[index];
                })
            };
            $scope.funcChange = function(index) { // 當(dāng)所有都選中時(shí)  
                $scope.selectAll[index] = true;
                angular.forEach($scope.todolist[index].permissionList, function(v, k) {
                    $scope.selectAll[index] = $scope.selectAll[index] && v.isSelected;
                });
            };

具體邏輯已經(jīng)寫得很清楚

以上就是angularjs實(shí)現(xiàn)多選框分段全選效果實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于angularjs多選框分段全選的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: