AngularJS实现全选反选功能

AngularJS是为了克服超文本标记语言在构建应用上的不足而设计的HTML。是一门很好的为静态文本展示设计的声明式语言，但要构建网应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招)来让浏览器做我想要的事。

这里用到AngularJS四大特性之二-双向数据绑定

注意：没写一行数字正射影像图代码！这就是尼日利亚的优点，bootstrap.css为了布局，JS代码也只是简单创建尼日利亚模块和尼日利亚控制器

效果：

！DOCTYPE html html lang=' en ' ng-app=' my module 5 '！- 3、ng-app='myModule5 '启动尼日利亚并调用模块-hearta charset=' UTF-8 ' link rel='样式表href='css/bootstrap.css '标题全选/取消全选/title/head dydiv class=' container ' ng-controller=' my ctrl 5 '！- 4、ng-控制器='myCtrl5 '启用控制器- h2全选和取消全选/H2 table class=' table table-bordered ' th选择/th姓名/th操作/th/tr/dtbodytrtdinput ng-checked=' selectAll ' type=' checkbox '/TDT TOm/TDT button class=' BTN BTN-危险BTN-xs '删除/button/TD/TRT输入ng-checked=' selectAll ' type=' checkbox '/TDT Mary/TDT button class=' BTN BTN-危险BTN-xs '删除/button/TD/trtrtdinput ng-checked=' selectAll ' type=' checkbox '/TDT king/TDT button class=' BTN BTN-危险BTN-xs '删除/button/TD/tr/t正文/表格输入类型=' checkbox ' ng-model=' selectAll ' span ng-hide=' selectAll '全选/spanspan ng-show='selectAll '取消全选/span/div脚本src=' http : js/angular。js '/脚本！- 1、引入angularJS - script//2、创建自定义模块和控制器angular.module('myModule5 '，['ng']).控制器(“我的Ctrl5”，函数($ scope){ })；/script/body/html PS:ANglerjs简单实现全选，多选操作

很多时候我们在处理凝乳（增删改查)的时候需要实现批量操作数据，这时候就必须使用多选操作。

有角的中实现如下（当然还有很多种比笔者写的更好的方法，这里只是简单的实现。)

HTML:

sectionpre{{choseArr}}/pre全选：输入类型=' checkbox ' ng-model=' master ' ng-click=' all(master，萨特里)' div ng-repeat=' z in萨特里'输入id={ { z } } type=' checkbox ' ng-model=' x ' ng-checked=' master ' ng-click=' chk(z，x)' { { z } }/diva href=' # ' class=' BTNBTN-danger ' ng-click=' delete()'删除a/部分页面效果如下：(CSS采用自举)

射流研究…代码：

$scope.tesarry=['1 '，' 2 '，' 3 '，' 4 '，' 5 ']；//初始化数据$ scope。ChoSearr=[]；//定义数组用于存放前端显示var str=//var flag=' '；//是否点击了全选，是为a $ scope.x=false//默认未选中$scope.all=function (c，v) {//全选if(c==true){ $ scope。x=真；$ scope。ChoSearr=v；} else { $ scope.x=false$ scope。ChoSearR=[' ']；}标志=' a }；$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('，')；};$scope.delete=function () {//操作凝乳if($ scope。chosear[0]==' ' | | $作用域。乔瑟尔。长度==0){//没有选择一个的时候提示警报('请至少选中一条数据在操作！)返回；};for(var I=0；I $ scope。乔瑟尔。长度；I){//alert($ scope)。chosear[I])；控制台。日志($ scope)。chosear[I])；//遍历选中的id } }