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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
AngularJS中table表格基本操作示例
Oct 10 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
Vue实现背景更换颜色操作
Jul 17 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
javascript 模拟点击广告
2010/01/02 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
JS实现小星星特效
2019/12/24 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python中datetime常用时间处理方法
2015/06/15 Python
python实现kMeans算法
2017/12/21 Python
python如何将图片转换为字符图片
2020/08/19 Python
python3.7 的新特性详解
2019/07/25 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
家长学校工作方案
2014/05/07 职场文书
施工安全承诺书
2014/05/22 职场文书
机电一体化专业求职信
2014/07/22 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
宾馆客房管理制度
2015/08/06 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
python b站视频下载的五种版本
2021/05/27 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB