前台页面:

  <div class="form-group">
<label for="CompanyName" class="col-sm-3 control-label">产品相斥:</label>
<div class="col-sm-9">
<span ng-repeat="proRadio in proRadios">
<input id="{{proRadio.ProductID}}" type="checkbox" name="{{proRadio.ProductName}}" value="{{proRadio.ProductID}}"
ng-click="updateSelection($event,proRadio.ProductID)" ng-checked="isSelected(proRadio.ProductID)" /> <label for="{{proRadio.ProductID}}">{{proRadio.ProductName}}</label>
</span> </div>
</div>

解释:这里的checkBox是动态加载的,proRadios在控制器中通过$scope.proRadios=……进行赋值,这里关键的两个方法ng-click与ng-checked

ng-click:调用方法将复选框的选中的集合进行更新操作,以便传入后台。

ng-checked:调用的方法返回true或false来决定复选框的选中状态。

控制器(Controller)中:

 //复选框设置
var IDs = product.ProductMutex.split('|');
//初始化数据将数据库里查询出来的数据存放到集合 $scope.selected中
$scope.selected = [];
for (var i in IDs) {
if (IDs != "")
{
$scope.selected.push(IDs[i]);
}
} var updateSelected = function (action, id, name) {
id = "" + id + "";
if (action == 'add' && $scope.selected.indexOf(id) == -1) {
$scope.selected.push(id);
}
if (action == 'remove' && $scope.selected.indexOf(id) != -1) {
var idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx, 1);
}
//alert($scope.selected);
}
//判断是在集合$scope.selected里去掉此id,还是加上id
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id, checkbox.name);
}
//设置复选框的选中状态
$scope.isSelected = function (id) {
id = "" + id + "";//因为$scope.isSelected中的数据是字符串,所以将数字装换成字符串
return $scope.selected.indexOf(id) >= 0;
}

最后的操作数据都存放到$scope.selected中了,在存入数据库就OK了。

注:仅个人笔记及总结,有误的地方请各位指正!

AngularJs 中的CheckBox前后台交互的更多相关文章

  1. 黄聪:AngularJS中的$resource使用与Restful资源交互(转)

    原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...

  2. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  3. 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)

    1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...

  4. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  5. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  6. AngularJS中实现无限级联动菜单

    多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...

  7. Angularjs中的promise

    promise 是一种用异步方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或抛出的异常.在与远程对象打交道非常有用,可以把它们看成一个远程对象的代理. 要在Angular中创建 ...

  8. Javacript和AngularJS中的Promises

    promise是Javascript异步编程很好的解决方案.对于一个异步方法,执行一个回调函数. 比如页面调用google地图的api时就使用到了promise. function success(p ...

  9. AngularJs中的directives(指令part1)

    一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

随机推荐

  1. static和extern对函数的作用

  2. Android中ProgressDialog的应用

    下面通过实现点击按钮来显示加载框,2秒后自动消失. 1.首先在layout的xml中添加一个按钮: <Button android:id="@+id/button1" and ...

  3. python的MySQLdb模块在linux环境下的安装

    开始学习python数据库编程后,在了解了基本概念,打算上手试验一下时,卡在了MYSQLdb包的安装上,折腾了半天才解决.记录一下我在linux中安装此包遇到的问题.系统是ubuntn15.04. 1 ...

  4. JavaScript中异步编程

    一 关于事件的异步 事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的.所以这里讲一下事件机制. 在一个js文件中,如果要运行某一个函数,有2中手段,一个就是直 ...

  5. php 将图片转成base64

    /** * 获取图片的Base64编码(不支持url) * @date 2017-02-20 19:41:22 * * @param $img_file 传入本地图片地址 * * @return st ...

  6. 目标检测算法SSD之训练自己的数据集

    目标检测算法SSD之训练自己的数据集 prerequesties 预备知识/前提条件 下载和配置了最新SSD代码 git clone https://github.com/weiliu89/caffe ...

  7. angular惰性加载拓展剖析

    最近把一个比较旧的业余项目重新升级了下,将主文件进行了剥离,增加了些惰性加载的配置,将过程中一些零散的知识点做个总结,同时尽量深入原理实现层面. 项目环境: 前端框架:angular2.0.0-bet ...

  8. jdbc连接1(可以注入)

    package demo3class; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepa ...

  9. 微信小程序 - switchTab传值

    “众所周知,switchTab是不能携带参数的” 我们有几种方式解决呢?(最好的解决方法是利用全局变量,这样可以避免因缓存造成的数据错误) 1. 通过全局变量(需要用到的页面都要引用它) 点击下载示例 ...

  10. LinearLayout学习笔记

    线性布局分两种,分别是水平线性布局和垂直线性布局,对应设置为android:orientation="horizontal"/"vertical". Linea ...