AngularJs实现checkbox的全选、全取消
2016-07-22 13:21
381 查看
HTML端的关键代码
<thead>
<tr>
<th style="width:100px;">
<label class="i-checks m-b-none">
<input type="checkbox" ng-model="master" ng-click="all(master,dataList1)"><i></i>
</label>
全选
</th>
</tr>
</thead>
<tr ng-repeat="d in dataList1 track by $index" > <td> <label class="i-checks m-b-none"> <input type="checkbox" name="selected" ng-model="x" ng-checked="master" ng-click="chk(d.id,x)"><i></i> </label> </td> <td ng-bind="d.id"></td> <td ng-bind="d.name"></td> </tr>
JS 端关键代码
$scope.choseArr=[];//定义数组用于存放前端显示
var str="";//
var flag='';//是否点击了全选,是为a
$scope.x=false;//默认未选中
$scope.all= function (c,v) {//全选
if(c==true){
$scope.x=true;
$scope.choseArr=[""];
}else{
$scope.x=false;
for(var i=0;i<v.length;i++){
$scope.choseArr[i]=''+v[i].id+'';
}
}
flag='a';
console.log($scope.choseArr);
};
$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(',');
console.log($scope.choseArr);
};
$scope.deletes= 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
}
};
相关文章推荐
- Angularjs 跨域请求
- AngularJS基础教程之简单介绍
- AngularJS中处理多个promise的方式
- AngularJS入门(用ng-repeat指令实现循环输出
- angularJS 中$attrs方法使用指南
- AngularJS实现textarea记录只能输入规定数量的字符并显示
- 深入浅析AngularJS和DataModel
- 简述AngularJS相关的一些编程思想
- 不能不知道的10个angularjs英文学习网站
- AngularJS中的$watch(),$digest()和$apply()区分
- Angularjs中的事件广播 ―全面解析$broadcast,$emit,$on
- AngularJS的一些基本样式初窥
- AngularJS 如何在控制台进行错误调试
- AngularJS使用指令增强标准表单元素功能
- AngularJs基本特性解析(一)
- 简单讲解AngularJS的Routing路由的定义与使用
- 创建你的第一个AngularJS应用的方法
- Angularjs过滤器使用详解
- 详解AngularJS中的作用域
- Angular发布1.5正式版,专注于向Angular 2的过渡