AngularJs 简单实现全选,多选操作
很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作。
Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。)
demo 演示地址:http://runjs.cn/detail/2p9bnznk
代码如下:
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 }
);
以上基本实现全选,反选,多选操作
AngularJs 简单实现全选,多选操作的更多相关文章
- AngularJs 简单实现全选,多选操作(转)
代码如下: HTML: <section> <pre>{{choseArr}}</pre> 全选: <input type="checkbox&qu ...
- angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
- jQuery实现全选、全不选以及反选操作
在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一 ...
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js实现复选框的操作-------Day41
不知道之前的一篇为什么一直处于审核阶段.难道有哪个词语是敏感词被河蟹了? 无论了,又一次写了这篇,也算是加深记忆吧. 首先要写的是今天在进行表格数据操作时用到的对复选框checkbox的全选和全不选, ...
- 『心善渊』Selenium3.0基础 — 14、Selenium对单选和多选按钮的操作
目录 1.页面中的单选按钮和多选按钮 2.判断按钮是否选中is_selected() 3.单选按钮的操作 4.多选按钮的操作 5.选择部分多选按钮的操作 1.页面中的单选按钮和多选按钮 页面中的单选按 ...
- JS-001-单选复选按钮操作
此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...
- AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定
AngularJS与单选框及多选框的双向动态绑定 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...
随机推荐
- Google加强版权保护
在版权保护方面,我们一直是反面教材,而在场面上Google早已退出我们的世界,所以Google的加强版权保护对国内的互联网不会有太多的影响,即便无法在Google搜索到我们需要的XXX软件破解版,百度 ...
- 例子:Background Agent Sample
通过本例程学习: 后台代理Agent的使用方法 定期代理(PeriodicTask)来说,限制了: 有一些API不能使用,并不是说你不调用就可以了,只要你在同一个程序集里使用了这些API,就不会通过验 ...
- [windows操作系统]windows管理
1.磁盘管理: 1.1.使用DISKPART命令行工具创建扩展分区: windows自带有一个disk management(磁盘管理)工具,但在其中却找不到如何创建扩展分区(一般MBR分区格式需要扩 ...
- Ztree使用笔记
在项目中需要用到树,使用了Ztree.(官网地址:http://www.treejs.cn/v3/main.php#_zTreeInfo,介绍很详细,有API,有demo) 1.初始化树: $.f ...
- OpenResty 安装及使用(第一篇安装)
OpenResty搭建 1.openResty介绍 OpenResty (也称为 ngx_openresty)是一个全功能的 Web 应用服务器.它打包了标准的 Nginx 核心,很多的常用的第三方模 ...
- maven遇到的问题
1.Missing artifact net.sf.json-lib:json-lib:jar:2.4:compile pom.xml原内容: <dependency> <group ...
- 无需输入密码的scp/ssh/rsync操作方法
一般使用scp/ssh/rsync传输文件时,都需要输入密码.下面是免密码传输文件的方法. 假设要在两台主机之间传送文件,host_src & host_dst.host_src是文件源地址所 ...
- java中,去除空白的方法
有时候,我们页面传过来的值,或者做excel导入时填入的值都需要去掉像空格一样的一些特殊字符,下面这个方法可去掉像制表符,换行键,回车,空格或者不在ACSII中 的特殊字符 /** * 去除字符串开始 ...
- C++ Primer : 第十三章 : 拷贝控制之对象移动
右值引用 所谓的右值引用就是必须将引用绑定到右值的引用,我们通过&&来绑定到右值而不是&, 右值引用只能绑定到即将销毁的对象.右值引用也是引用,因此右值引用也只不过是对象的别名 ...
- ✡ leetcode 158. Read N Characters Given Read4 II - Call multiple times 对一个文件多次调用read(157题的延伸题) --------- java
The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the actu ...