AngularJS与单选框及多选框的双向动态绑定

     赠人玫瑰,手留余香。若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!

AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示:

<input type="text" ng-model="topic.title" />

只需要用ng-model 与 $scope 中的属性对应,即实现了type=”text” 的双向动态绑定。当 <input type="radio" /> 及 <input type="checkbox" /> 时情况略有不同:

1. <inputtype="radio" />

     <input type="radio" name="person-action" value="go_home" ng-model="person.action" />回家
      <input type="radio" name="person-action" value="go_to_school" ng-model="person.action"  />回学校

通过 value 属性指定选中状态下对应的值,并通过 ng-model 将单选框与 $scope 中的属性对应,便实现了 type=”radio” 时的双向动态绑定。

2. <input type="checkbox" />

   <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_sound" />铃声
   <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_vibrate" />震动
   <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_lights" />呼吸灯

通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ,指定多选框在选中和未选中状态下对应的值,再通过ng-model 将其与 $scope 中的属性对应,便实现了type=”checkbox” 的双向动态绑定。

但是理想跟现实总是相差太多,在实际操作过程中还是出现了问题。应该是ng-repeat中scope作用域的问题。

经过一番搜索、调试,自己终于将此问题解决了,效果图如下:

核心源码

js

var str = "";	// 原来存放选中的项
$scope.Selected = false;	//默认未选中
var choseArr=[];	// 定义数组用于存放前端显示
$scope.check = function(z,x){
console.log("HUY:");
console.log(z);

console.log("HUYU:");
console.log(x);
if (x == false) { 	// 选中
            str = str + z + ',';
        } else {
            str = str.replace(z + ',', ''); // 取消选中
        }

        choseArr = (str.substr(0,str.length-1)).split(',');

 	console.log("HY:");
 	console.log(choseArr);

 	$scope.number_request = choseArr.length;	// 前端显示所选数量
 	$scope.content_request = choseArr;	// 前端显示所选请求ID
};

Html

    	<tr ng-repeat="item in querydata">

    	<td ng-bind="$index+1">1</td>
        	<td><a ui-sref="#">{{item.postid}}</a></td>
         	<td>{{item.medname}}</td>
         	<td>{{item.medfact}}</td>
         	<td>{{item.medcnt}}</td>
         	<td>{{item.remark}}</td>
         	<td>{{item.tel}}</td>
         	<td>{{item.post_time}}</td>
         	<td><input id={{item.postid}} type="checkbox" ng-model="Selected" ng-click="check(item.postid,Selected)" /></td>
    	</tr>

参考文献:

http://www.oschina.net/translate/handling-checkboxes-and-radio-buttons-in-angular-forms

http://www.cnblogs.com/CheeseZH/p/4517701.html

http://www.bubuko.com/infodetail-954078.html

AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定的更多相关文章

  1. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  2. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  3. AngularJS进阶(三十四)Angular数据更新不及时问题探讨

    Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...

  4. AngularJS进阶(二十二)实现时间选择插件

    JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶 ...

  5. AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...

  6. AngularJS进阶(二十六)实现分页操作

    JS实现分页操作 前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果.在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果.受前面"JS实现时间选择插件 ...

  7. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

  8. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  9. Android进阶(二十四)Android UI---界面开发推荐颜色

    Android UI---界面开发推荐颜色   在Android开发过程中,总要给app添加一些背景,个人认为使用纯色调便可以达到优雅的视觉效果. 补充一些常用的颜色值:colors.xml < ...

随机推荐

  1. 炫酷:一句代码实现标题栏、导航栏滑动隐藏。ByeBurger库的使用和实现

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 其实上周五的时候已经发过一篇文章.基本实现了底部导航栏隐藏的效果.但是使用起来可能不是很实用.因为之前我实现的方式是继承了系统的 ...

  2. Spring MVC 实践 - Base

    Spring MVC 实践 标签 : Java与Web Spring Web MVC Spring-Web-MVC是一种基于请求驱动的轻量级Web-MVC设计模式框架, Spring MVC使用MVC ...

  3. iter 函数另类用法

    它可以很简单地构造一个无限迭代器: ): print(i) #将无限打印出0 原来,如果iter有第二个参数,那么第一个参数必须是一个参数可以省略的可调用对象.int函数符合这种要求. 迭代什么时候停 ...

  4. 设置 NSZombieEnabled 定位 EXC_BAD_ACCESS 错误

    我们做 iOS 程序开发时经常用遇到 EXC_BAD_ACCESS 错误导致 Crash,出现这种错误时一般 Xcode 不会给我们太多的信息来定位错误来源,只是在应用 Delegate 上留下像 T ...

  5. Java基本语法-----java关键字

    1.1关键字的概述 Java的关键字对java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等,关键字不能用作变量名.方法名.类名.包名. 1.2常见的关键字 备注: 不必死记硬背 ...

  6. [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/42940883 本文作者:sushengmiyan ------------------ ...

  7. 解决Xshell显示中文乱码的问题

    执行echo $LANG命令输出的是当前的编码方式,执行locale命令得到系统中所有可用的编码方式.要让Xshell不显示乱码,则要将编码方式改为UTF-8. 在Xshell中[file]-> ...

  8. android orm持久层框架

    ; ; i < 2; i++) { )); ); h1.setWord("这是修改过的数据"); tv.setText(tv.getText() + "\n&quo ...

  9. Maven创建EJB

    开发工具: eclipse mars wildfly jdk8 maven 右键新建project,选择other 勾选create simple project 填写信息(自行填写),完成后右键项目 ...

  10. linux内核cfs浅析

    linux调度器的一般原理请参阅<linux进程调度浅析>.之前的调度器cfs之前的linux调度器一般使用用户设定的静态优先级,加上对于进程交互性的判断来生成动态优先级,再根据动态优先级 ...