解决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中的call实现继承
Jan 22 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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 return语句的另一个作用
2014/07/30 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
python中requests模块的使用方法
2015/04/08 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
对python函数签名的方法详解
2019/01/22 Python
Python time库基本使用方法分析
2019/12/13 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
分居协议书范本
2014/11/03 职场文书
困难补助申请报告
2015/05/19 职场文书
贫困证明书范文
2015/06/16 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
使用Java去实现超市会员管理系统
2022/03/18 Java/Android