解决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 相关文章推荐
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
Vue实现验证码功能
2019/12/03 Javascript
Python os模块介绍
2014/11/30 Python
Python执行时间的计算方法小结
2017/03/17 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
校园联欢晚会主持词
2014/03/17 职场文书
创意婚礼策划方案
2014/05/18 职场文书
项目经理任命书范本
2014/06/05 职场文书
护士求职信
2014/07/05 职场文书
教师暑期培训感言
2014/08/15 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
mysqldump进行数据备份详解
2022/07/15 MySQL