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


Posted in Javascript onApril 20, 2017

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作用域的问题。

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

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

核心源码

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>

参考文献:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Vue如何引入远程JS文件
Apr 20 #Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
You might like
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python中的__slots__使用示例
2015/02/26 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
先进集体获奖感言
2014/02/13 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
电力培训心得体会
2014/09/02 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2015年环卫工作总结
2015/04/28 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
电力安全学习心得体会
2016/01/18 职场文书