AngularJS实现全选反选功能


Posted in Javascript onDecember 08, 2015

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

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

注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器

效果:

AngularJS实现全选反选功能

<!DOCTYPE html>
<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<title>全选/取消全选</title>
</head>
<body>
<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->
<h2>全选和取消全选</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Tom</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Mary</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>King</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" ng-model="selectAll">
<span ng-hide="selectAll">全选</span>
<span ng-show="selectAll">取消全选</span>
</div>
<script src="js/angular.js"></script><!--1、引入angularJS-->
<script>
//2、创建自定义模块和控制器
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope){
});
</script>
</body>
</html>

ps:AngularJs 简单实现全选,多选操作

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

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

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) 

AngularJS实现全选反选功能

JS代码:

$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=true;
$scope.choseArr=v;
}else{
$scope.x=false;
$scope.choseArr=[""];
}
flag=‘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 () {// 操作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
}
};
Javascript 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 #Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 #Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 #Javascript
AngularJS Module方法详解
Dec 08 #Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 #Javascript
JS与jQ读取xml文件的方法
Dec 08 #Javascript
js实现select下拉框菜单
Dec 08 #Javascript
You might like
PHP环形链表实现方法示例
2017/09/15 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
js动态引入的四种方法
2018/05/05 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
在python中安装basemap的教程
2018/09/20 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
毕业生找工作的求职信范文
2013/12/24 职场文书
小学新学期教师寄语
2014/01/18 职场文书
2014年医务科工作总结
2014/12/18 职场文书
求职信范文怎么写
2015/03/19 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript