代码如下:

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 简单实现全选,多选操作(转)的更多相关文章

  1. AngularJs 简单实现全选,多选操作

    很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...

  2. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

  3. jQuery实现全选、全不选以及反选操作

    在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一 ...

  4. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  5. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. js实现复选框的操作-------Day41

    不知道之前的一篇为什么一直处于审核阶段.难道有哪个词语是敏感词被河蟹了? 无论了,又一次写了这篇,也算是加深记忆吧. 首先要写的是今天在进行表格数据操作时用到的对复选框checkbox的全选和全不选, ...

  7. 『心善渊』Selenium3.0基础 — 14、Selenium对单选和多选按钮的操作

    目录 1.页面中的单选按钮和多选按钮 2.判断按钮是否选中is_selected() 3.单选按钮的操作 4.多选按钮的操作 5.选择部分多选按钮的操作 1.页面中的单选按钮和多选按钮 页面中的单选按 ...

  8. JS-001-单选复选按钮操作

    此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...

  9. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

随机推荐

  1. [Flask]通过render_form快捷渲染表单

    依赖: Bootstrap-Flask 实例化方式与flask_bootstrap相同. 关于render_form(): Bootstrap-Flask内置了两个用于渲染WTForms表单类的宏,r ...

  2. linux 下的快捷键操作

    概述 今天发现自己码代码的效率有点低,所以查找了一下 linux 常用的快捷键操作,记录下来,供以后开发时参考,相信对其他人也有用. linux 终端常用快捷键 tab:补全命令 Ctrl + u:剪 ...

  3. Python基本语法_控制流语句_if/while/for

    目录 目录 前言 软件环境 If 语句 While循环 break continue for 循环 遍历String 遍历Tuple 遍历List 遍历Dictionary 最后 前言 控制流语句用于 ...

  4. CentOS7上安装配置破解Elasticsearch+Kibana 6.4.2-6.5.1全过程

    最近正在学习服务器应用平台的搭建的相关知识.有幸从朋友与书上了解到Elastic套件的使用,我花了两天的时间把最新的套件部署在我的服务器上,中间踩了数不清的坑.我把整个过程都记录了下来与各位有需要的朋 ...

  5. C++写Socket——TCP篇(0)建立连接及双方传输数据

    满山的红叶--飘落之时-- 最近接触了点关于用C++写socket的东西,这里总结下. 这里主要是关于TCP的,TCP的特点什么的相关介绍在我另一篇博文里,所以这里直接动手吧. 我们先在windows ...

  6. ENVI-IDL的MATH_DOIT和CF_DOIT函数(对FID和POS参数的讨论)

    MATH_DOIT相当于ENVI的band math,可以完成各种波段运算.参数比较简单,EXP为运算公式的字符串,其他参数均为常见参数. CF_DOIT可以将已有的文件保存为ENVI格式文件,相当于 ...

  7. SVM之KKT条件理解

    在SVM中,我们的超平面参数最终只与间隔边界上的向量(样本)有关,故称为支持向量机. 求解最优超平面,即求最大化间隔,或最小化间隔的倒数:||w||2/2,约束条件为yi(wTxi+b)>=1 ...

  8. python+selenium下载文件——Chrome

    from selenium import webdriver import time options = webdriver.ChromeOptions() prefs = { 'profile.de ...

  9. Spring(一)--Spring简介

    Spring简介 1. Spring的特点 Spring (春天,绿色)  容器 01.Java EE开发者的春天,大大简化了代码量 02.使用IOC来降低主业务之间的耦合度 03.使用AOP来降低主 ...

  10. JackRabbit的来源

    题记 写这系列有点老调重弹的味道,比如ahuaxuan已经在他的博客里对于JackRabbit 1.0做了很详细的阐述.之所以再写,是因为JCR推出了JCR 2.0,个人觉得有必要将一些新的特性再罗列 ...