angularjs input checkbox复选框组的实现

最新推荐文章于 2021-05-14 17:45:08 发布

friend_ship

最新推荐文章于 2021-05-14 17:45:08 发布

阅读量371

点赞数 1

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

版权

Angular 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

AngularJS

13 篇文章 0 订阅

订阅专栏

如果实现方式是编辑功能需要根据返回值展示，请参考：https://mp.csdn.net/postedit/100520822

第一种实现方式（如创建功能）：

// 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="row.id" ng-click="updateSelect($event,row.id)" ng-checked="isSelected(row.id)" ng-model="all">
        </span>
        <label for="{{row.id}}">{{row.name}}</label>
    </div>
  </div>
</body>

// 控制器逻辑处理
var control = app.module('textController', function($scope){
    $scope.all = false;// 判断是否为全选
    $scope.list = []; // 用来保存数据
    $scope.selected = [];//用来存储选中的复选框
    //调用api获取list值，赋值给$scope.list

    // 判断是否为全选
    $scope.updateAll = function(val) {
        if(!val) {
            $scope.selected = [];
            $scope.list.forEach( row => {
                // 向后端发送选中数据的id。如果要发送一个对象，则可以将$scope.list直接赋值给$scope.selected
                $scope.selected.push(row.id);
            })
        }else {
            // 置空选中的数组
            $scope.selected = [];
        }
    }

    // 判断选中的复选框
    $scope.updateSelect = 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);
            
        }
        if(action == 'delete' && $scope.selected.indexOf(id) != -1) {
             let idx = $scope.selected.indexOf(id);
             $scope.selected.splice(idx,1);
        }

        if($scope.selected.length == $scope.list.length) {
            $scope.all = true;
        }else {
            $scope.all = false;
        }
    }
    
    // 判断是否选中
    $scope.isSelected = function(id) {
        return $scope.selected.indexOf(id) >= 0;
    }
    
})

friend_ship

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs input checkbox复选框组的实现

如果实现方式是编辑功能需要根据返回值展示，请参考：https://mp.csdn.net/postedit/100520822第一种实现方式（如创建功能）：// html代码<body ng-app="app"> <div> <--全选功能--> <input type="checkbox" name="ch...
复制链接

扫一扫