angularJs 实现checkbox全选和多选

<!-----html  --->

<div ng-controller="MyCtrl">

    <table class="table">

        <thead>

            <tr>

                <th>

                    <input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"

                    />

                </th>

                <th>Title</th>

            </tr>

        </thead>

        <tbody>

            <tr ng-repeat="e in entities" ng-class="getSelectedClass(e.id)">

                <td>

                    <input type="checkbox" name="selected" ng-checked="isSelected(e.id)" ng-click="updateSelection($event, e.id)"/>

                </td>

                <td>{{e.title}}</td>

            </tr>

        </tbody>

    </table>

</div>

<!---js--->

var myApp = angular.module('myApp', []);

MyCtrl = function ($scope) {

    $scope.entities = [{

        "title": "foo",

        "id": 1

    }, {

        "title": "bar",

        "id": 2

    }, {

        "title": "baz",

        "id": 3

    }];

    $scope.selected = [];

    var updateSelected = function (action, id) {

        if (action == 'add' & $scope.selected.indexOf(id) == -1) $scope.selected.push(id);

        if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1);

    }

    $scope.updateSelection = function ($event, id) {

        var checkbox = $event.target;

        var action = (checkbox.checked ? 'add' : 'remove');

        updateSelected(action, id);

    };

    $scope.selectAll = function ($event) {

        var checkbox = $event.target;

        var action = (checkbox.checked ? 'add' : 'remove');

        for (var i = 0; i < $scope.entities.length; i++) {

            var entity = $scope.entities[i];

            updateSelected(action, entity.id);

        }

    };

    $scope.getSelectedClass = function (entity) {

        return $scope.isSelected(entity.id) ? 'selected' : '';

    };

    $scope.isSelected = function (id) {

        return $scope.selected.indexOf(id) >= 0;

    };

    //something extra I couldn't resist adding :)

    $scope.isSelectedAll = function () {

        return $scope.selected.length === $scope.entities.length;

    };

}

//==================================方法2==============================================

//  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="isSelect" ng-checked="master"
           ng-click="chk(z,x)">{{z}}
   </div>
   <a href="#" class="btn btn-danger" ng-click="delete()"> 删除</a>
</section> 

//  js文件

$scope.tesarry=["1","2","3","4","5"];// 初始化数据
$scope.choseArr=[];// 定义数组用于存放前端显示
var str="";//
var flag="";// 是否点击了全选，是为a
$scope.isSelect=false;// 默认未选中

$scope.all= function (c,v) {// 全选
if(c==true){
$scope.isSelect=true;
$scope.choseArr=v;
}else{
$scope.isSelect=false;
$scope.choseArr=[""];
}
flag="a";
};
$scope.chk= function (z,x) {//单选或者多选
if(flag=="a") {//在全选的基础上操作
str = $scope.choseArr.join(",") + ",";
}
if (x == true) {//选中
str = str + z + ",";
} else {
str = str.replace(z + ",", "");//取消选中
}
$scope.choseArr=(str.substr(0,str.length-1)).split(",");
};

$scope.deleted= function () {// 操作CURD
if($scope.choseArr[0]==""||$scope.choseArr.length==0){//没有选择一个的时候提示
alert("请至少选中一条数据在操作！");
return;
};
for(var i=0;i<$scope.choseArr.length;i++){
console.log($scope.choseArr[i]);//遍历选中的id
}
};