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 ...
随机推荐
- rest-framwork官方文档教程(一)
该项目是按照官网quickstart进行的,具体也可查看rest-framework官网: https://www.django-rest-framework.org/tutorial/quickst ...
- 【Luogu】P3157动态逆序对(树状数组套主席树)
题目链接 md第一道在NOILinux 下用vim做的紫题.由于我对这个操作系统不是很熟悉,似乎有什么地方搞错了,md调死.(我还打了两遍代码,调了两个小时) 但是这道题并不难,就是树状数组套上主席树 ...
- 刷题总结——单旋(HNOI2017 bzoj4825)
题目: Description H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据 结构,因为代码好写,功能多,效率高,掌握这种数据结构成为了 ...
- 学习 WebService 第二步:知识准备——SOAP vs REST(wsdl和wadl区别)(转)
原文地址:蓝精灵——默默争上游 笔记: SOAP和REST是两种实现WebService的主要方案(Web API部署REST貌似占了大半壁江山) REST Web Services 基于 HTTP ...
- 2017.8.12 dp课小结
这节课难度超级大啊,基本上都是省选+NOI的题. 例1: 1801: [Ahoi2009]chess 中国象棋 Time Limit: 10 Sec Memory Limit: 64 MB Subm ...
- bzoj 1038 瞭望塔 半平面交+分段函数
题目大意 给你一座山,山的形状在二维平面上为折线 给出\((x_1,y_1),(x_2,y_2)...(x_n,y_n)\)表示山的边界点或转折点 现在要在\([x_1,x_n]\)(闭区间)中选择一 ...
- uva 12723 概率dp
Dudu is a very starving possum. He currently stands in the first shelf of a fridge. This fridge isco ...
- The Luckiest number(hdu 2462)
给定一个数,判断是否存在一个全由8组成的数为这个数的倍数 若存在则输出这个数的长度,否则输出0 /* 个人感觉很神的一道题目. 如果有解的话,会有一个p满足:(10^x-1)/9*8=L*p => ...
- UVa11424 GCD - Extreme (I)
直接两重循环O(n^2)算gcd……未免太耗时 枚举因数a和a的倍数n,考虑gcd(i,n)==a的i数量(i<=n) 由于gcd(i,n)==a等价于gcd(i/a,n/a)==1,所以满足g ...
- net9:图片变成二进制流存入XML文档,从XML文档中读出图片以及从XML文档中读取并创建图片文件
原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] fileToXml类: using System;using System.Data;using System.C ...