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
});
AngularJs 简单实现全选,多选操作(转)的更多相关文章
- AngularJs 简单实现全选,多选操作
很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...
- 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 ...
随机推荐
- Dynamic Web TWAIN——网页扫描SDK
下载地址:[https://www.dynamsoft.com/Support/DWTGuide/Dynamic%20Web%20TWAIN%20SDK.html] API:[http://devel ...
- Asp.Net Webform 常用代码
1015.ASP.Net WebForm 数据绑定 < %# %> < %= %> < % %> < %@ %> Eval("Nam ...
- Redis 入门 3.3 散列类型
3.3.1 介绍 散列类型(hash)的键值也是一种字典结构,其储存了字段(field)和字段值的映射,但字段值只能是字符串,不支持其他数据类型,换句话说,散列类型不能嵌套其他的数据类型.一个散列 ...
- Tomcat 部署两个工程时,另一个访问出现404
tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决 在开发新项目的时候,有时候为了省时,直接把曾经做过的项目工程A拷贝成改名为B工程,然后再在B工程上进行功能的开发, 此 ...
- cocos2dx基础篇(2) 第一个程序
[本节内容] 1.程序的基本组成:CCSprite(精灵).CCLayer(层).CCScene(场景).CCDirector(导演) 2.分析HelloWorld源码. 一.基本组成 cocos2d ...
- P1551 亲戚
这里是题面啊~ 这道题我就不多说了,基本(好吧没有基本)就是一道模板题,读入+并查集+输出,完美结束 #include<set> #include<map> #include& ...
- 数据库SQL语句查询指定时间段内的数据
[摘要]有的时候,我们需要查询数据库某段时间之间的数据,比如2016年5月1号到到5月3号之间用户注册数量(特殊节假日期间)等.那么用SQL语句如何实现呢? 首先,数据表中的存时间的字段比如是addt ...
- SpringMvc 整合mybatis项目搭建
1.使用idea创建maven项目 2.在项目src目录下 添加java文件夹 并设置类型为sources,添加resource文件夹 设置为resources 4.修改pom文件 添加引用 < ...
- 使用lombok.Data编译时无法找到get/set方法
我的IDEA版本是2019.2 在使用IDEA创建了一个SpringBoot项目,其中一个实体类使用了@Data注解,但是在Service中调用的时候找不到get/set方法. 检查步骤: 1.在St ...
- 【洛谷P1119题解】灾后重建——(floyd)
这道题告诉我,背的掉板子并不能解决一切问题,理解思想才是关键,比如不看题解,我确实想不清楚这题是弗洛伊德求最短路 (我不该自不量力的说我会弗洛伊德了我错了做人果然要谦虚) 灾后重建 题目背景 B地区在 ...