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 ...
随机推荐
- 每天一个linux命令(九月)
2014-09-02 top 实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器 命令參数: -b 批处理 -c 显示完整的治命令 -I 忽略失效过程 -s 保密模式 -S 累积模 ...
- android 推断是否支持闪光灯
近期在做录制视频功能,在找一些资料时发现 要推断是否支持闪关灯,在这记录下来,怕以后忘记 public static boolean isSupportCameraLedFlash(PackageMa ...
- Android怎样从外部跳进App
解决问题有两个作用: 1.不用打开App直接进入某页面 2.实现App分享到外部,同一时候由外部进入App的闭环. 这个话题能够分双方面来讲.一方面是从微信进入App,还有一方面是从网页进入App. ...
- html5缓存
HTML5 提供了两种在client存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 这些都是由 coo ...
- 前端编程提高之旅(十二)----position置入值应用
这次内推项目用到的遮罩及其页面下方button都涉及一个概念position置入值得概念.效果图例如以下: 一个元素position属性不是默认值static.那么该元素被称为定位元素. 定位的元素生 ...
- Python带括号的计算器
带括号的计算器也是第一个自我感觉完成最好的 毕竟真的弄了一个多星期 虽然前期这路真的很难走 我会努力加油 将Python学好学踏实 参考了两位博主的文章 http://www.cnblogs.co ...
- Linux下配置Squid基础教程
Linux下配置Squid基础教程 本视频高清下载地址:http://down.51cto.com/data/437529 本文出自 "李晨光原创技术博客" 博客,请务必保留此出处 ...
- 【VC++学习笔记四】MFC应用程序中框架类的获取
一.文档类中 获取视图: 先获取主窗体,在根据主窗体获取视图 pMain->GetActiveDocument();注意类型转换 由于文档中可能包含多个视图,可以按照下面函数获取: CView* ...
- cogs 1500. 误差曲线
1500. 误差曲线 ★★ 输入文件:errorcurves.in 输出文件:errorcurves.out 评测插件时间限制:1 s 内存限制:256 MB [题目描述] Josep ...
- Eclipse语言的切换方法
安装完中文语言包之后,如果想切换回英文,可以按照下边的方法来做: 创建一个快捷方式,然后鼠标邮件这个快捷方式,在属性里加入-nl "en_US" 记得加空格.应用就可以. 同理切换 ...