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

 更新时间:2018年10月02日 14:01:53   作者:灼灼其华_CSDN  
今天小编就为大家分享一篇解决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中取不到值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Angular.js的$q.defer()服务异步处理

    详解Angular.js的$q.defer()服务异步处理

    相信大家都知道jquery和angular都有defer服务,这篇文章暂以angular为例谈谈个人的理解,在文章的最后并附上jquery的阮一峰总结的defer。有需要的朋友们也可以参考借鉴,下面来一起学习学习吧。
    2016-11-11
  • 详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖

    详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖

    本篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • AngularJS 最常用的八种功能(基础知识)

    AngularJS 最常用的八种功能(基础知识)

    这篇文章主要介绍了AngularJS 最常用的八种功能,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-06-06
  • angularjs学习笔记之双向数据绑定

    angularjs学习笔记之双向数据绑定

    AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同,脏治检查允许AngularJS监视那些存在或者不存在的变量。
    2015-09-09
  • angularJs在多个控制器中共享服务数据的方法

    angularJs在多个控制器中共享服务数据的方法

    今天小编就为大家分享一篇angularJs在多个控制器中共享服务数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angular.JS去掉访问路径URL中的#号详解

    Angular.JS去掉访问路径URL中的#号详解

    最近天天都在用AngularJS,各类文档也都看过好几遍,但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了,这个问题不见得有多难,关键是花多长时间去理解AngularJS框架本身,下面来看看详细介绍,需要的朋友可以参考下。
    2017-03-03
  • AngularJS  双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    这篇文章主要介绍了AngularJS 双向数据绑定详解简单实例的相关资料,需要的朋友可以参考下
    2016-10-10
  • angularJs提交文本框数据到后台的方法

    angularJs提交文本框数据到后台的方法

    今天小编就为大家分享一篇angularJs提交文本框数据到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 深入浅析AngularJS中的module(模块)

    深入浅析AngularJS中的module(模块)

    我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧
    2016-01-01
  • 在AngularJS中使用jQuery的zTree插件的方法

    在AngularJS中使用jQuery的zTree插件的方法

    这篇文章主要介绍了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但还不是完全版的jQuery,需要的朋友可以参考下
    2016-04-04

最新评论