应用场景是这样的,后台返回的数据在页面上复选框的形式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多选的应用的更多相关文章

  1. layui 复选框checkbox 全选写法

    前语:本来我是不想写layui框架的博客的,有的时候数据经过layui渲染后原生的写法就取不到值了,一定要用它框架的写法,实在蛋疼,故写之,以后用到可以省点时间去度娘! HTML: <div i ...

  2. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  3. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  4. jQuery 操作复选框(checkbox) attr checked不起作用

    参考资料 http://www.paobuke.com/develop/javascript/pbk849.html   这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...

  5. 复选框(checkbox)、单选框(radiobox)的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  6. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  7. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  8. sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突

    gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...

  9. 3.Android之单选按钮RadioGroup和复选框Checkbox学习

    单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...

随机推荐

  1. POJ——1308Is It A Tree?(模拟拓扑排序判断有向图是否为树)

    Is It A Tree? Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 28399   Accepted: 9684 De ...

  2. fzu 1753 质因数的应用

    Another Easy Problem Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64 ...

  3. SqlServer-1

    参考:https://blog.csdn.net/qq_29413829/article/details/80077550 安装sqlServer2012:https://blog.csdn.net/ ...

  4. 反汇编->C++虚函数深度分析

    先来查看一简单例子 #include<iostream> using namespace std; class Base{ public: virtual void f() { cout ...

  5. Java后端WebSocket的Tomcat实现 html5 WebSocket 实时聊天

    WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据.Tomcat7.0.47上才能运行. 需要添加Tomcat里lib目 ...

  6. 作列表排列时div的table属性应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 第一章spring boot简介

    接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复黏贴的配置有一些厌烦?那么您就不妨来试试使用Spring Boot来让你更易上手, ...

  8. 洛谷—— P1875 佳佳的魔法药水

    https://www.luogu.org/problemnew/show/1875 题目背景 发完了 k 张照片,佳佳却得到了一个坏消息:他的 MM 得病了!佳佳和大家一样焦急 万分!治好 MM 的 ...

  9. 转 Windows串口过滤驱动程序的开发

    在Windows系统上与安全软件相关的驱动开发过程中,“过滤(filter)”是极其重要的一个概念.过滤是在不影响上层和下层接口的情况下,在Windows系统内核中加入新的层,从而不需要修改上层的软件 ...

  10. bootstrap-datetimepicker时间控件的使用

    官方文档:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm 常规使用: <div class="input-grou ...