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

});