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 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
js表单验证实例讲解
Mar 31 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
实例详解带参数的 npm script
May 28 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实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
javascript中window.event事件用法详解
2012/12/11 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
node.js实现上传文件功能
2019/07/15 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python基础教程之匿名函数lambda
2017/01/17 Python
解决uWSGI的编码问题详解
2017/03/24 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python http基本验证方法
2018/12/26 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
网上签名寄语活动留言
2014/01/18 职场文书
环保口号大全
2014/06/12 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
岳麓书院导游词
2015/02/03 职场文书
辞职信格式模板
2015/02/27 职场文书
试用期辞职信范文
2015/03/02 职场文书
初三毕业感言
2015/07/31 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python