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 ...
随机推荐
- [flask]jinjia2处理表单-实现搜索界面
思路: 通过flask-wtf创建forms表单类 在app.py中创建search_name()视图函数,实例化form表单类,将通过render_template将form传给html模板 创建h ...
- Cinder LVM backend cinder-volume service down
目录 文章目录 目录 问题 调查 解决 问题 [stack@manager ~]$ cinder service-list +------------------+------------------ ...
- python学习笔记:(十五)迭代器和生成器
一.迭代器: 1.迭代器是python最强大的功能之一,是访问集合元素的一种方式. 2.迭代器是一个可以记住遍历的位置的对象. 3.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问结束.迭代 ...
- 【DVWA】File Inclusion(文件包含漏洞)通关教程
日期:2019-07-28 20:58:29 更新: 作者:Bay0net 介绍: 0x01. 漏洞介绍 文件包含时,不管包含的文件是什么类型,都会优先尝试当作 php 文件执行. 如果文件内容有 p ...
- MariaDB 连接查询,视图,事物,索引,外键
1.连接查询 --创建学生表 create table students ( id int unsigned not null auto_increment primary key, name var ...
- Flume HA
flume提供fail over和load balance功能 1.添加collector配置(配置两个collector) # Name the components on this agents1 ...
- yum升级python
一,查看系统默认版本 [root@redhat7 ~]# python -VPython 2.7.5 二,安装依赖包 yum install epel-release -y 三,查看新版本 yum s ...
- 找工作Java面试 题搜集
面向对象的特征有哪些方面?答:面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些行为的 ...
- python 并发编程 基于gevent模块实现并发的套接字通信
之前线程池是通过操作系统切换线程,现在是程序自己控制,比操作系统切换效率要高 服务端 from gevent import monkey;monkey.patch_all() import geven ...
- Excel使用技巧大全(超全)
目录 Excel 使用技巧集锦 --163 种技巧 一. 基本方法 1. 快速选中全部工作表 2. 快速启动 Excel 3. 快速删除选定区域数据 4. 给单元格重新命名 5. 在 Excel 中选 ...