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 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
BootStrap前端框架使用方法详解
Feb 26 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
物理教师自荐信范文
2013/12/28 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
社保转移委托书范本
2014/10/08 职场文书
道歉短信大全
2015/05/12 职场文书
横空出世观后感
2015/06/09 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python
Redis批量生成数据的实现
2022/06/05 Redis