angularjs input checkbox复选框组的实现

最新推荐文章于 2024-04-01 19:33:10 发布

friend_ship

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/friend_ship/article/details/100520822

版权

Angular 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

AngularJS

13 篇文章 0 订阅

订阅专栏

如果实现方式是创建功能，请参考：https://mp.csdn.net/postedit/100515989

第二种实现方式（如修改功能），代码如下：

// html页面代码

<body ng-app="app">
    <div>
        <input type="checkbox" name="checkbox" ng-model="all" ng-click="updateAll(all)" ng-checked="all">全选
        <div>
            <span ng-repeat="row in list">
                <input type="checkbox" name="{{row.name}}" value="{{value.id}}" ng-click="updateSelected($event,row.id)" ng-checked="row.check" ng-model="row.check">
                <label for="{{row.id}}">{{row.name}}</label>
            </span>
        </div>
    </div>
    
</body>

// 控制器逻辑处理
var control = app.module('textController', function($scope){
    // 后端返回数据用$scope.list接收存储所有要展示复选框数据。
    // $scope.selectedList接收存储选中的复选框,且数据为选中的数据id。

    // 如果$scope.list数组中，对象里面有一个属性为boolean值，用来判断复选框是否选中，则直接将ng-checked="布尔值"，下面的情况就可以不看了。

    // 如果$scope.list数组中，对象里面没有一个属性为boolean值，则可以通过逻辑处理添加一个boolean值用来判断哪个是选中的
    
    // 下面的代码，我们只讨论在返回数据中没有boolean值的情况
    let temp = data;//用一个变量来接受返回值，待处理完再赋值给$scope.list
    $scope.selected = [];// 用来保存选中的数据
    $scope.unSelected = [];// 用来保存未选中的数据
    for(var i = 0; i < temp.length; i++) {
        let ok = false;
        $scope.selectedList.forEach( row => {
            // 为选中的id添加check属性是true
            if(row.id == temp[i].id) {
                temp[i].check = true;
                $scope.selected.push(temp[i])
            }
        })
        if(!ok) {
            // 为没有选中的id添加check属性为false
            temp[i].check = false;
            $scope.unSelected.push(temp[i])
        }
    }
    
    // 将选中的和未选中的全部放进一个list里面
    $scope.list = [...$scope.selected,...$scope.unSelected];

    if($scope.selected.length==$scope.list.length) {
         $scope.all = true; // 全选为true
    }else {
          $scope.all = false; // 全选为false
    }


     // 点击选中事件
    $scope.updateAll = function(val) {
        if(!val) {
            $scope.selected = [];
            $scope.list.forEach( row => {
                row.check = true;
                $scope.selected.push(row.id);                
            })
        }else {
            $scope.selected = [];

            $scope.list.forEach( row => {
                row.check = false;
            })
        }
    }

    // 复选框选中事件
    $scope.updateSelected = function($event,id) {
        let checkbox = $event.target;
        let action = (checkbox.checked ? 'add' : 'delete');
        if(action == 'add' && $scope.selected.indexOf(id) == -1) {
            $scope.selected.push(id);
            $scope.list.forEach( row => {
                if(row.id == id) {
                    row.check = true;
                }
            })
        }
        if(action == 'delete'&&$scope.selected.indexOf(id) != -1) {
            let idx = $scope.selected.indexOf(id);
            $scope.list.forEach( row => {
                if(row.id == id) {
                    row.check = false;
                }
            })
        }

        if($scope.selected.length == $scope.list.length) {
            $scope.all = true;
        }else {
            $scope.all = false;
        }
    }
    
})