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 ...
随机推荐
- p2p項目夭折,有種蛋蛋的憂傷。。
在高考完的暑假就在跟杰哥讨论怎样实现的校内p2p文件共享,就在今天.我们无奈的宣布差点儿夭折. 上图是測试图. 那时候的思路已经完好.就是:"学生上传共享文件到咱们工作室的server. ...
- Mac OSX 平台安装 MongoDB
Mac OSX 平台安装 MongoDB MongoDB 提供了 OSX 平台上 64 位的安装包,你可以在官网下载安装包. 下载地址:https://www.mongodb.com/download ...
- html 下载文件代码
首先在html中加个a标签 <a class="menu" href="/cmdb/file_down" download="ljctest.t ...
- POJ 3622 multiset
思路: 放一个链接 是我太懒了 http://blog.csdn.net/mars_ch/article/details/52835978 嗯她教的我(姑且算是吧) (一通乱搞就出来了-) //By ...
- JWT Authentication Tutorial: An example using Spring Boot--转
原文地址:http://www.svlada.com/jwt-token-authentication-with-spring-boot/ Table of contents: Introductio ...
- Linux常用的安全工具
Linux常用的安全工具 "工欲善其事,必先利其器".作为一个合格的系统管理员,要应对可能发生的安全事件,掌握Linux下各种必须的安全工具是首要大事.本文主要介绍Linux上常用 ...
- Linux常用图片查看处理软件
1.Shotwell是一款轻量级的图片管理软件,GNOME桌面环境默认自带,您可以使用它来从数码相机中导入相片.shotwell允许用户对图片进行管理,并且提供了一些基本的编辑功能,您可以对图片进行剪 ...
- vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:8086 && vue init webpack-simple xxx
vue init webpack-simple mywork报错如下: vue-cli · Failed to download repo vuejs-templates/webpack-simple ...
- Httpd 文件服务器的搭建
服务器信息 系统: CentOS 安装操作 安装 httpd 直接通过 yum 安装: yum install httpd 安装完成之后,可以检查版本: http 查看版本 httpd -versio ...
- C# 调用者信息特性(Attribute)
.NET 4.5中引用了三种特性(Attribute), 该特性允许获取调用者的当前编译器的执行文件名.所在行数与方法或属性名称. 命名空间 System.Runtime.CompilerServic ...