angular 复选框checkBox多选的应用
应用场景是这样的,后台返回的数据在页面上复选框的形式repeat出来
可能会有两种需求:
第一:后台返回的只有项,而没有默认选中状态(全是待选状态)

这种情况相对简单只要repeat出相应选项
第二:后台返回的不仅有项,还有选中状态

这个时候需要后台返回一个带状态值的参数,然后绑定在modal上,设置ng-true-value=“”中 默认选中的值,reepeat出来的时候就可以带选中状态了。
接下来说下重点:怎么把选中的打钩项一并传给后台,
我这里说下我个人的做法
主要是在每个 checkBox 上添加 ng-click 并且将key值传入
<input ng-checked="checkFirst(a.appid)" ng-click="appSelect(a.appid)" type="checkbox"/>{{a.appname}
之后在点选的时候进行判断,主要代码
$scope.arrApp = []; // 如果需要选中默认值或者带入默认选项需要循环出所以key值添加到数组中
$scope.appSelect = function(id){
var index = $scope.arrApp.indexOf(id);
if( index < 0 ){
$scope.arrApp.push(id);
}else{
$scope.arrApp.splice(index,1);
}
}
OK,这样只要把相应的数组传入后端就可以了。
angular 复选框checkBox多选的应用的更多相关文章
- layui 复选框checkbox 全选写法
前语:本来我是不想写layui框架的博客的,有的时候数据经过layui渲染后原生的写法就取不到值了,一定要用它框架的写法,实在蛋疼,故写之,以后用到可以省点时间去度娘! HTML: <div i ...
- css3美化复选框checkbox
两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- jQuery 操作复选框(checkbox) attr checked不起作用
参考资料 http://www.paobuke.com/develop/javascript/pbk849.html 这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...
- 复选框(checkbox)、单选框(radiobox)的使用
复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...
- php 判断复选框checkbox是否被选中
php 判断复选框checkbox是否被选中 复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...
- jquery判断复选框checkbox是否被选中
jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');
- sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突
gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...
- 3.Android之单选按钮RadioGroup和复选框Checkbox学习
单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...
随机推荐
- 【Luogu】P2604网络扩容(费用流乱搞)
题目链接 这题比较水,就是乱改改费用流模板.判断一下已经满流的边和没有满流的边,然后再改改最大流模板,然后把它们拼起来就是了. 话说这题第一遍90,然后撕烤一会发现自己yy的spfa扩容方式不允许反悔 ...
- HDU——4565So Easy!(矩阵快速幂)
So Easy! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- Ubuntu12.04 64bit版本下载Android源码完整教程
首先去官网http://source.android.com/source/initializing.html可以看到完整的安装教程.不过一般情况下,按照这个教程是无法一步到位的,因为中途肯定会遇到很 ...
- mac/linux自带定时任务执行crontab的使用
1.编辑定时任务信息 sudo crontab -e #以root用户创建,也可以 -u 参数 编辑内容如下: 频率表达式分别对应为 分.时.日.周.月 LANG=zh_CN.UTF-8 */30 * ...
- 喵星球上的点名(bzoj 2754)
Description a180285幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣. 假设课堂上有N个喵星人,每个喵星人的名字由姓和名构成.喵星球上的老师会选择M个串 ...
- spring mvc处理静态文件
现在流行REST开发风格,REST风格的URL 是不希望看到例如:*.do后缀的. <servlet-mapping> <servlet-name>cxy</servle ...
- 【NOIP2016游记】
day-5:上午看了火箭打马刺 火箭差点翻盘但老大爷们还是稳 下午一场五校 T1T2原题做过 T3分块 day-4:上午五校1小时写3道暴力 2个半小时优化 然而还不知道拿了多少 %%%CC T2树链 ...
- 【開發時,應注意事項】 vendor tools 無法 work 時,怎麼辦?
遇到 vendor tools 無法 work 時, 最好的方法直接請 vendor 來, 為什麼呢? 因為 tool 可能 有版本的問題, 譬如: vendor tool A tool 在 buil ...
- AC日记——[USACO09OCT]Bessie的体重问题Bessie's We… 洛谷 P2639
题目描述 Bessie像她的诸多姊妹一样,因为从Farmer John的草地吃了太多美味的草而长出了太多的赘肉.所以FJ将她置于一个及其严格的节食计划之中.她每天不能吃多过H (5 <= H & ...
- 1076. Wifi密码 (15)【模拟】
1076. Wifi密码 (15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 下面是微博上流传的一张照片:“ ...