AngularJs 简单实现全选,多选操作(转)

代码如下:

HTML:

<section>
       <pre>{{choseArr}}</pre>
      全选: <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)">
       <div ng-repeat="z in tesarry">
           <input id={{z}} type="checkbox"  ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}}
       </div>
       <a href="#" class="btn btn-danger" ng-click="delete()" > 删除</a>
   </section>

页面效果如下:(CSS采用bootstrap)

js代码

var app = angular.module('app', []);
app.controller('MainCtrl',
function($scope, $http, $timeout) {
    $scope.tesarry = [1, 2, 3, 4, 5]; //初始化数据
    $scope.choseArr = []; //定义数组用于存放前端显示
    var str = ""; //
    var len = $scope.tesarry.length; //初始化数据長度
    var flag = ''; //是否点击了全选,是为a
    $scope.x = false; //默认未选中
    $scope.all = function(c, v) { //全选
        if (c == true) {
            $scope.x = true;
            $scope.choseArr = angular.copy(v);
            flag = 'a';
        } else {
            $scope.x = false;
            $scope.choseArr = [];
            flag = 'b';
        }
    };
    $scope.chk = function(z, x) { //单选或者多选
        if (x == true) { //选中
            $scope.choseArr.push(z) flag = 'c'
            if ($scope.choseArr.length == len) {
                $scope.master = true
            }
        } else {

            $scope.choseArr.splice($scope.choseArr.indexOf(z), 1); //取消选中
        }
        if ($scope.choseArr.length == 0) {
            $scope.master = false
        };
    };
    $scope.delete = function() { // 操作CURD
        if ($scope.choseArr[0] == "" || $scope.choseArr.length == 0) { //没有选择一个的时候提示
            alert("请至少选中一条数据在操作!") return;
        };

        for (var i = 0; i < $scope.choseArr.length; i++) {
            alert($scope.choseArr[i]);

            console.log($scope.choseArr[i]); //遍历选中的id
        }

    }; //delete end
});

  

原文地址:https://www.cnblogs.com/Andrew520/p/10682211.html