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 ...
随机推荐
- BZOJ4598 [Sdoi2016]模式字符串 【点分治 + hash】
题目 给出n个结点的树结构T,其中每一个结点上有一个字符,这里我们所说的字符只考虑大写字母A到Z,再给出长度为m 的模式串s,其中每一位仍然是A到z的大写字母.Alice希望知道,有多少对结点< ...
- Java连接SQLite数据库
下载java包:sqlite-jdbc-3.7.2.jar,放到java工程目录lib下 如下代码实例: import java.sql.*; import org.sqlite.JDBC; /** ...
- PHP中的验证码类(验证码功能设计之二)
运行结果: <!--vcode.class.php内容--> <?php class Vcode { private $width; //宽 private $height; //高 ...
- Django时区配置:有次发现缓存的时间总是有问题,原来是时区配置需要改
# LANGUAGE_CODE = 'en-us' # TIME_ZONE = 'UTC' LANGUAGE_CODE = 'zh-Hans' TIME_ZONE = 'Asia/Shanghai'
- 机器人程序设计——之如何正确入门ROS | 硬创公开课(附视频/PPT)【转】
转自:http://blog.exbot.net/archives/2966 导语:本期公开课面向想入手ROS却又不知从何下手的小伙伴,为大家梳理好学习思路. ROS和Android一样是开源的,功能 ...
- select与stdio混合使用的不良后果
参考以下链接自己补充实验:http://www.cppblog.com/mysileng/archive/2013/01/15/197284.aspx?opt=admin int main(int a ...
- c#FileStream文件读写
//C#文件流写文件,默认追加FileMode.Append string msg = "okffffffffffffffff"; b ...
- TopCoder SRM596 DIV2 1000: SparseFactorialDiv2
题意: For an integer n, let F(n) = (n - 0^2) * (n - 1^2) * (n - 2^2) * (n - 3^2) * ... * (n - k^2), wh ...
- Python Challenge 第三关
进入第三关,还是一张图加一句话:One small letter, surrounded by EXACTLY three big bodyguards on each of its sides. 图 ...
- 如何通过ShareSDK的 Unity3D快速接入Android/iOS分享与授权
Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎:在游戏 ...