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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
jquery实现图片预加载
Dec 25 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
js初始化验证实例详解
Nov 26 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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
PHP数字格式化
2006/12/06 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
学习ExtJS Column布局
2009/10/08 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
挖掘机司机岗位职责
2014/02/12 职场文书
村庄绿化方案
2014/05/07 职场文书
药品营销策划方案
2014/06/15 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
合作协议书模板
2014/10/10 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
新生开学寄语大全
2015/05/28 职场文书
获奖感言一句话
2015/07/31 职场文书