Angularjs:实现全选
html:
<div class="input-group">
<span class="input-group-addon" style="background-color: #fff;border:none">状态</span>
<div ng-model="queryParam.status" class="ui-checkbox ui-checkbox-primary" style="margin-top: 4px;margin-bottom: 0;">
<label class="ui-checkbox-inline">
<input type="checkbox" ng-model="all" ng-change="selectAll()">
<span>全部</span>
</label>
<label class="ui-checkbox-inline" ng-repeat = "x in List">
<input type="checkbox" ng-model="x.checked" ng-change="selectOne()">
<span>{{x.name}}</span>
</label>
</div>
</div>
js:
$scope.checked = [];
$scope.selectAll = function () {
if($scope.all) {
$scope.checked = [];
angular.forEach($scope.List, function (i) {
i.checked = true;
$scope.checked.push(i.value);
})
}else {
angular.forEach($scope.List, function (i) {
i.checked = false;
$scope.checked = [];
})
}
}; $scope.selectOne = function () {
angular.forEach($scope.List , function (i) {
var index = $scope.checked.indexOf(i.value);
if(i.checked && index === -1) {
$scope.checked.push(i.value);
} else if (!i.checked && index !== -1){
$scope.checked.splice(index, 1);
};
})
if ($scope.List.length === $scope.checked.length) {
$scope.all = true;
} else {
$scope.all = false;
}
};
Angularjs:实现全选的更多相关文章
- AngularJS 的全选、反选实现
目录 AngularJS 的全选.反选实现 一.需求 二.思路 三.实现 AngularJS 的全选.反选实现 一.需求 要使用 AngularJS 实现 checkbox 的全选.反选. 其中所有项 ...
- AngularJs实现全选功能
html代码 <!-- 数据表格 --> <div class="table-box"> <!--工具栏--> <div class=&q ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
- angularJS全选功能实现
最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...
- AngularJs 简单实现全选,多选操作
很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...
- angularJS 全选反选批量删除
<th> <label for="flag"> <span ng-hide="master">全选</span> ...
- AngularJs 简单实现全选,多选操作(转)
代码如下: HTML: <section> <pre>{{choseArr}}</pre> 全选: <input type="checkbox&qu ...
- AngularJS--购物车全选/取消全选功能实现
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...
- Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
随机推荐
- 封装html代码块到js函数中
有时候想把公共的html封装起来,怎么处理呢? 好多页面都用到,不可能每个页面都写,这样就会有冗余,并且不好统一处理. 那就用js来重构html吧. 代码案例如下: <footer class= ...
- bind DNS搭建笔记
设置默认网关 偶尔会出现问题 route add default gw 192.168.0.1 .vim /etc/sysctl.conf 这里是重点 配置路由转发,路由开启等都要用到. # Cont ...
- Python带括号的计算器
带括号的计算器也是第一个自我感觉完成最好的 毕竟真的弄了一个多星期 虽然前期这路真的很难走 我会努力加油 将Python学好学踏实 参考了两位博主的文章 http://www.cnblogs.co ...
- Hue的三大特点、三大功能和架构
不多说,直接上干货! Hue 是 Cloudera 的大数据 Web 工具 官方访问网站 : http://gethue.com/ GitHub : https://github.com/cloude ...
- nuxt 关闭ESlint 语法检测
学习nuxt中在自己编写search组件的时候出现了各种类似于Expected indentation of 0 spaces but found 4的问题 上网搜是因为ESlint语法检测产生的问题 ...
- Android Studio使用Mob来获取手机验证码加上倒计时
再根据上编的基础上再添加倒计时即可 添加一个类TimeCountUtil package zhu.com.yzm4; import android.os.CountDownTimer; import ...
- HDU 4971 A simple brute force problem.
A simple brute force problem. Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged o ...
- 检查类型是否包含iterator
- [Javascript] Compose multiple functions for new behavior in JavaScript
In this lesson you will create a utility function that allows you to quickly compose behavior of mul ...
- AutoLayout具体解释+手把手实战
首先说一下这篇博客尽管是标记为原创,可是事实并不是本人亲自写出来的.知识点和样例本人花了一天各处查找和整理终于决定写一个汇总的具体解释,解去各位朋友到处盲目查找的必要,由于不是转载某一个人的内容.故此 ...