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 ...
随机推荐
- Django notes I: collection of links to the Django document
Links to the Django documents: the Django template language automatically generated context variable ...
- 刷题总结——开车旅行(NOIP2012 set+倍增)
题目: 题目描述 小 A 和小 B 决定利用假期外出旅行,他们将想去的城市从 1 到 N 编号,且编号较小的城市在编号较大的城市的西边,已知各个城市的海拔高度互不相同,记城市 i 的海拔高度为Hi,城 ...
- poj 2079 Triangle
Triangle Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 9835 Accepted: 2951 Descript ...
- POJ1167 The Buses
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 6234 Accepted: 1698 Description A man ...
- 【CF1025C】Plasticine zebra(模拟)
题意: n<=1e5 思路:可以证明答案即为极长交替出现的串长度之和 需要注意其实这个串是一个环,复制后再做 #include<cstdio> #include<cstring ...
- vue2.0组件入门
如何定义一个组件 在根目录src/components/文件夹下新建组件的文件夹Footer.vue组件 在Footer.vue中 <template> <div class=&qu ...
- Linux 虚拟内存和物理内存的理解【转】
转自:http://www.cnblogs.com/dyllove98/archive/2013/06/12/3132940.html 首先,让我们看下虚拟内存: 第一层理解 1. 每 ...
- Python Challenge 第四关
进入了第四关.只有一张图,我还是像往常一样查看源代码.果然,发现了一行注释:urllib may help. DON'T TRY ALL NOTHINGS, since it will never e ...
- 理解webpack中的devTool的配置项
2.1. eval eval 会将每一个module模块,执行eval,执行后不会生成sourcemap文件,仅仅是在每一个模块后,增加sourceURL来关联模块处理前后对应的关系.在webpac ...
- 基于python的性能测试工具–locust
现在有很多的性能测试工具,比如说我们熟悉的loadrunner.jmeter.ab.webbench等等,这些工具如果对一个没用过的朋友来说,学习起来比较不容易,但是如果你能看懂python代码,会写 ...