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 ...
随机推荐
- jQUery中的$(document).ready()方法和window.onload()方法的区别
1.常规的Javascript代码中,通常使用window.onload方法 window.onload = function(){//代码} 2.jquery中,则使用$(document).rea ...
- 单例/单体模式(Singleton)
单例/单体模式(Singleton) 首先,单例模式是对象的创建模式之一,此外还包括工厂模式. 单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3, ...
- x86 下的 struct 變數 member 擺放位置
2 int main() 3 { 4 struct _test { 5 int a; 6 int b; 7 int c; 8 }; 9 10 struct _test test; 11 test.a ...
- 解决win2008下IIS7的HTTP500错误
造成500错误常见原因有:ASP语法出错.ACCESS数据库连接语句出错.文件引用与包含路径出错.使用了服务器不支持的组件如FSO等.另外,对于win2008的IIS默认不显示详细出错信息的问题以下就 ...
- Ui大屏
http://www.uimaker.com/plus/view.php?aid=128661&pageno=1
- 微信小程序之微信支付C#后台(统一下单)
一.微信小程序支付 1.微信小程序端请求支付接口 商户在小程序中先调用该接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易后调起支付.具体可以查看接口示例. 接口传入参数示例: <xm ...
- 问题:Linux 输入任何命令都显示 -bash: fork: Cannot allocate memory
应该是某个程序吃掉了所有的内存,只能重启
- HDU 2874 Connections between cities(LCA)
题目链接 Connections between cities LCA的模板题啦. #include <bits/stdc++.h> using namespace std; #defin ...
- linux编译
文章一 1)用户点击编译程序时,编译程序将C++源代码转换成目标代码,目标代码通常由 机器指令和记录如何将程序加载到内存的信息组成.其后缀通常为.obj或.o: 2)目标文件中存储的只是用户所编写的代 ...
- jenkins集群节点构建maven(几乎是坑最多的)
业务量变大时,单台的jenkins进行自动化构建部署,就显得没那么灵活,jenkins的集群并非像web服务器.mysql集群那样,jenkins的集群无需在额外的主机安装jenkins,但是用于ja ...