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 ...
随机推荐
- android动画-拖动
先上图看效果 实质上说是动画有点不妥,确切的说应该是手势的处理,废话不多说看代码 SimpleDragSample.java public class SimpleDragSample extends ...
- Redis封装之Hash
RedisHashService: /// <summary> /// Hash:类似dictionary,通过索引快速定位到指定元素的,耗时均等,跟string的区别在于不用反序列化,直 ...
- python数据处理技巧一
字符串赋值(传参)技巧 Python中一般的字符串赋值的方式如下: variable = "Test" print "I just [%s] unit"%var ...
- 51nod 编辑距离 + 滚动数组优化
这道题一开始觉得增加和删除会移动字符串的位置很不好做 两个字符串dp状态一般是第一个前i个和第二个前j个 #include<cstdio> #include<algorithm> ...
- sed的一些tricks
1.sed -f xx.sed input_file 可以将一系列操作放在一个xx.sed脚本里执行 ``` #!/bin/sed -f ``` 2.在匹配字符串后面或行尾添加内容 在text后面添加 ...
- [ES6] The Iterator Protocol
The iterator protocol is used to define a standard way that an object produces a sequence of values. ...
- PostgreSQL递归查询实现树状结构查询
在Postgresql的使用过程中发现了一个非常有意思的功能,就是对于须要相似于树状结构的结果能够使用递归查询实现.比方说我们经常使用的公司部门这样的数据结构.一般我们设计表结构的时候都是相似以下的S ...
- BRep Shapes Based on Tessellated Geometry
BRep Shapes Based on Tessellated Geometry eryar@163.com Key Words. BRep Shape, Tessellated Geometry, ...
- es69
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 打包成 apk 文件(修改路径)
第一个坑:文件引用路径 现在项目我们什么都没动,是初始化之后直接打包的状态,打开dist/index.htmnl文件整个网页都是一片空白的. 爬坑: 打开 config文件夹/index.js文件 a ...