解决ng-repeat产生的ng-model中取不到值的问题


Posted in Javascript onOctober 02, 2018

最近遇到在ng-repeat产生的textarea中绑定ng-model后,在js中取不到ng-model值的问题。

html的代码结构如下

<div class="ques-item hide1 show9a" id="q10">
 <div class="ques-item-question">
  10.{{questions[9].questionContent}}
 </div>
 <div class="ques-item-option">
  <div ng-repeat="option in questions[9].options">
   <input type="{{questions[9].questionType}}" name="problem10" value="{{option.optionCode}}" id="{{option.id}}">
   <label for="{{option.id}}">{{option.optionContent}}</label>
   <textarea ng-if="$index == 4" class="ques-option-text" name="" id="" cols="30" rows="1" ng-model="text10"></textarea>
  </div>
 </div>
</div>

用ng-repeat循环输出了该题目的选项,有的选项后面有输入框,于是用ng-if控制某个选项后面添加textarea输入框。在用ng-model双向绑定了text10后,当输入框中输入内容时,js中的$scope.text10并不能取得内容。

经过查询发现原因是,ng-repeat会产生子作用域,而js中的scope是父作用域的,Angularjs中的作用域向上查找,所以是不能取得ng-repeat中的绑定值的。

解决方案就是把子scope中的值通过$parent属性传递给父scope,同时把text10定义为数组,即前端绑定时使用$parent.text10[$index],这样就绑定了每一个textarea输入框的值,从而能在js中获取到。

修改后如下:

<div class="ques-item hide1 show9a" id="q10">
 <div class="ques-item-question">
  10.{{questions[9].questionContent}}
 </div>
 <div class="ques-item-option">
  <div ng-repeat="option in questions[9].options">
   <input type="{{questions[9].questionType}}" name="problem10" value="{{option.optionCode}}" id="{{option.id}}">
   <label for="{{option.id}}">{{option.optionContent}}</label>
   <textarea ng-if="$index == 4" class="ques-option-text" name="" id="" cols="30" rows="1" ng-model="$parent.text10[4]"></textarea>
  </div>
 </div>
</div>

以上这篇解决ng-repeat产生的ng-model中取不到值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 #Javascript
浅谈开发eslint规则
Oct 01 #Javascript
Angular ElementRef简介及其使用
Oct 01 #Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 #Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 #Javascript
vue项目持久化存储数据的实现代码
Oct 01 #Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
php中cookie的使用方法
2014/03/29 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
取选中的radio的值
2010/01/11 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python中format函数如何使用
2020/06/22 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
服务员自我评价
2014/01/25 职场文书
护士自我鉴定总结
2014/03/24 职场文书
捐助倡议书范文
2014/04/15 职场文书
经典团队口号
2014/06/06 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis