解决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 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
js中作用域的实例解析
Mar 16 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
js闭包学习心得总结
Apr 17 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
javascript 模拟点击广告
2010/01/02 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
利用python实现命令行有道词典的方法示例
2017/01/31 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python实现代码块儿折叠
2020/04/15 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
倡议书格式
2014/04/14 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
商品陈列协议书
2014/09/29 职场文书
期末个人总结范文
2015/02/13 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js