AngularJS 的全选、反选实现

---

AngularJS 的全选、反选实现

一、需求

• 要使用 AngularJS 实现 checkbox 的全选、反选。
• 其中所有项都选中，则全选的 checkbox 也选中。
• 有一项没有选中，全选的 checkbox 不选中。
• 点击反选按钮，所有项反选，全选的checkbox 视情况而定，如果再所有项都没有选中的情况下反选等同于全选。

二、思路

1. 需要获取全选 checkobx 的选中状态。
2. 需要获取每个项 checkbox 的状态。
3. 需要获取所有选中的 checkbox 的ng-model。
4. 需要获取所有选项的数量。（用于和 3 进行比较，来判断是否全部选中）
5. 需要获取反选按钮的状态，然后所有选中的 checkbox 的 ng-model 置反。

三、实现

1. index.html

   
   
    
        
        
        
        
    
    
        
   
            
   全选 
            
   
                {{entity.value}}
            
        
    
   

2. index.js

   var app = angular.module('demo',[]);
   
   app.controller("indexController",function($scope){
    // 自定义数据列表
    $scope.list = [{"id": "1","value": "a"},{"id": "2","value": "b"},
                    {"id": "3","value": "c"},{"id": "4","value": "d"},
                    {"id": "5","value": "e"}];
   
    $scope.selectIds=[];// 选中的ID集合 
    $scope.select_one=[]; // 单项是否选中状态集合，以 [{"1":true}...] 的方式存在，实际开发中，id 可能不是数字
    $scope.sellect_all = false; // 全选按钮是否选中
    $scope.invert_all = false; // 反选按钮是否选中
   
    // 全选功能
    $scope.selectAll = function($event, list) {
        // 因为绑定的 sellect_all 有滞后，所以让其等于 $event.target.checked
        $scope.sellect_all = $event.target.checked;
   
        if ($scope.sellect_all) {
            angular.forEach(list, function(value) {
                $scope.selectIds.push(value.id);
                $scope.select_one[value.id] = true;
            })
        } else {
            // 实现全不选功能
            $scope.selectIds=[];
            $scope.select_one=[];
        }
    }
   
    // 反选功能
    $scope.invertAll = function($event, list) {
        $scope.invert_all = $event.target.checked;
        // 实现反选功能
        $scope.selectIds=[];
        angular.forEach(list, function(value) {
            $scope.select_one[value.id] = !$scope.select_one[value.id];
            if ($scope.select_one[value.id]) {
                $scope.selectIds.push(value.id);
            }
        })
        checkAll();
    }
   
    // 单项checkbox选择功能
    $scope.selectOne = function($event, id, list) {     
        if($event.target.checked){//如果是被选中,则增加到数组
            $scope.selectIds.push( id);         
        }else{
            var idx = $scope.selectIds.indexOf(id);
              $scope.selectIds.splice(idx, 1);//删除 
        }
        checkAll();
    }
   
    // 检查是否全选
    checkAll = function() {
        // 如果按钮已全部被选，就使全选按钮选中，之所以进行非0判断，是考虑到了在实际环境中数据是服务器响应的。
        if ($scope.selectIds.length != 0 && $scope.list.length == $scope.selectIds.length) {
            $scope.sellect_all = true;
        } else {
            // 如果有的按钮没有被选中，就取消全选
             $scope.sellect_all = false;
        }
    } 
   });

3. 实现效果
   

   

   

转载于:https://www.cnblogs.com/jtznenic/p/11434124.html