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 ...
随机推荐
- HDU 5391-Zball in Tina Town(数论)
题目地址:pid=5391">HDU 5391 题意: Tina Town 是一个善良友好的地方,这里的每个人都互相关心.Tina有一个球,它的名字叫zball. zball非常奇妙, ...
- 【LeetCode】3Sum Closest 解题报告
[题目] Given an array S of n integers, find three integers in S such that the sum is closest to a give ...
- SQL server无法启动服务,提示“错误1069: 由于登录失败而无法启动服务”
原因:大部分情况是你修改了服务器系统的登录密码,而导致SQL服务无法启动. 解决方法:将sql server(mssql server)服务的登录密码改为系统登录密码或本地登录,如下操作步骤: 在wi ...
- pigofzhou的巧克力棒
Description 众所周知,pigofzhou有许多妹子.有一天,pigofzhou得到了一根巧克力棒,他想把这根巧克力棒分给他的妹子们.具体地,这根巧克力棒长为 n,他想将这根巧克力棒折成 n ...
- 利用反射实现Servlet公共类的抽取
一次请求的执行过程: 请求:发送请求地址-->到达web.xml中,找到地址对应的servlet类-->通过反射调用该类的构造函数,创建该servlet类的对象-->通过当前对象调用 ...
- 【VC++学习笔记一】MFC操作Excel
最近在做一个读取Excel的功能,之前也做过相关的,但总是零零闪闪的,趁着正在劲头上,归纳一下: 利用Automation添加相关的类,在Excel2010中可以在安装文件夹下直接点击Excel.ex ...
- 【Henu ACM Round #12 E】Thief in a Shop
[链接] 我是链接,点我呀:) [题意] n个物品,每个物品都有无限个. 第i个物品的价格是一样都,都是ai 让你从中选出恰好k个物品 问你选出的物品的总价值 有多少种不同的可能. [题解] 可以用f ...
- SQL char字段类型排序
我是做的ACCESS时候需要对字段的值进行排序,字段格式是char类型的,但是存的值是数字.现在需要对该字段进行排序. 通过查找,找到以下两种方法,记录下来. 1. 你可以转换成int型再排序 sel ...
- 11.2.0.1升级到11.2.0.4报错之中的一个:UtilSession failed: Patch 9413827
UtilSession failed: Patch 9413827 requires component(s) that are not installed in OracleHome. These ...
- C++里的模板
1.泛型编程 --即实现一个通用的标准容器库. 所谓通用的标准容器库,就是要做到:比方List类存放全部肯恩类型的对象这样的事:泛型编程让你编写一个全然一般化并可反复使用的算法,其效率与针对某特定数 ...