<!-----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
}
};