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

最近遇到在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中取不到值的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS解决ng-if中的ng-model值无效的问题

    与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <scri

  • 解决angularjs WdatePicker ng-model的问题

    假设我们在项目中需要用到WdatePicker以及angularjs,并有如下的代码: <div> <div class="h4">ddd</div> <input class="form-control" type="text" ng-model="text.ddd" readonly="readonly" onClick="WdatePicker({d

  • angular ng-model 无法获取值的处理方法

    该问题是由angular使用jq日期插件导致的无法双向绑定 <input id="dateDayStart" ng-model="dateDayStart" /> 解决方法:重新绑定 setInterval(function () { $scope.$apply(function () { $scope.params.dateDayStart = document.getElementById('dateDayStart').value; }); },

  • AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值               最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model="变量",什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家. 代码 html <div> <div class="modal-header"

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

    最近遇到在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=

  • angularJs select绑定的model取不到值的解决方法

    前端直接绑定值,不传参数,controller中会一直取到初始化的值,无法实时获取前端select改变的值. 解决方法一:前端调用方法的时候,一边传参数(亲测可用) <select ng-model="speed" name="speed" ng-change="vm.h5Video().Playspeed(speed)> <option value="1" selected="selected"&

  • Django Model中字段(field)的各种选项说明

    字段与选项 CharField() 字符字段 max_length = xxx or None # 必选项 blank = True 和 default = '' # 如果不是必填项,可以设置 unique = True # 如果想要使其唯一,比如用于username,可以设置 choices = xxx_CHOICES # 如果有choice选项,可以设置 TextField() 文本字段 max_length = xxx blank = True 和 default = '' # 如果不是必

  • .NET中TextBox控件设置ReadOnly=true后台取不到值三种解决方法

    当TextBox设置了ReadOnly="true" 后,要是在前台为控件添加了值,后台是取不到的,值为"空" 原理没想通,说不清楚微软是出于什么考虑的,不过有时是要我们能通过前台脚本来填充值,并不希望用户修改其控件内容,这时就比较尴尬了. 刚开始是换成Html 里的 <input type="text" readonly="readonly" > ,不过后来发现这个工作量是很大的, 所以网上搜了下,没找出Text

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • 完美解决jQuery的hover事件在IE中不停闪动的问题

    在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百度上找了N久,没有找到解决方法.在这里吐槽一下,百度太2了,收录的内容都没什么价值,最后还是在google找到了解决方法,下面就把这个jQuery的hover在IE中会导致不停闪动的解决方法教给大家. $("#category ul").find("li").each(

  • java中Servlet Cookie取不到值原因解决办法

    java中Servlet Cookie取不到值原因解决办法 现象: 在测试带Cookie的HTTP请求时发现,服务端用request.getHeader("cookie")可以去到值; 但是用request.getCookies()却不行 Cookie mycookies[] = request.getCookies(); 中永远获取不到uid的值:(80端口号除外) 原因: 查了浏览器的具体cookie值,发现 http://localhost:8080/ 访问的时候,cookie值

  • Mysql中 unique列插入重复值该怎么解决呢

    当unique列在一个UNIQUE键上插入包含重复值的记录时,我们可以控制MySQL如何处理这种情况:使用IGNORE关键字或者ON DUPLICATE KEY UPDATE子句跳过INSERT.中断操作或者更新旧记录为新值. mysql> create table menus(id tinyint(4) not null auto_increment, -> label varchar(10) null,url varchar(20) null,unique key(id)); Query

  • 解决Vue编译时写在style中的路径问题

    解决Vue编译时写在style中的路径问题

    写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片. 通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题. 要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品

  • MySQL5.7中的sql_mode默认值带来的坑及解决方法

    在正常项目开发过程中,如果MySQL版本从5.6升级到5.7版本.作为DBA在考虑数据库版本升级带来的影响时,一般会有几个注意点: sql_mode optimizer_switch 本文主要内容是MySQL升级到5.7版本之后,由于默认的 sql_mode 值带来的坑以及对应的解决方案. 案例一:ONLY_FULL_GROUP_BY 问题描述 MySQL版本从5.6升级至5.7之后,部分SQL执行报错,报错信息如下: ERROR 1055 (42000): Expression #3 of X

随机推荐