快捷導(dǎo)航

解決ng-repeat產(chǎn)生的ng-model中取不到值的問(wèn)題

更新時(shí)間：2018年10月02日 14:01:53 作者：灼灼其華_CSDN

今天小編就為大家分享一篇解決ng-repeat產(chǎn)生的ng-model中取不到值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

最近遇到在ng-repeat產(chǎn)生的textarea中綁定ng-model后，在js中取不到ng-model值的問(wèn)題。

html的代碼結(jié)構(gòu)如下

<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循環(huán)輸出了該題目的選項(xiàng)，有的選項(xiàng)后面有輸入框，于是用ng-if控制某個(gè)選項(xiàng)后面添加textarea輸入框。在用ng-model雙向綁定了text10后，當(dāng)輸入框中輸入內(nèi)容時(shí)，js中的$scope.text10并不能取得內(nèi)容。

經(jīng)過(guò)查詢(xún)發(fā)現(xiàn)原因是，ng-repeat會(huì)產(chǎn)生子作用域，而js中的scope是父作用域的，Angularjs中的作用域向上查找，所以是不能取得ng-repeat中的綁定值的。

解決方案就是把子scope中的值通過(guò)$parent屬性傳遞給父scope，同時(shí)把text10定義為數(shù)組，即前端綁定時(shí)使用$parent.text10[$index]，這樣就綁定了每一個(gè)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產(chǎn)生的ng-model中取不到值的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS中table表格基本操作示例
這篇文章主要介紹了AngularJS中table表格基本操作,涉及AngularJS針對(duì)table表格元素與屬性的相關(guān)動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2017-10-10
AngularJS基礎(chǔ) ng-keyup 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keyup 指令,這里對(duì)ng-keyup指令的基本資料進(jìn)行了整理,并且附有代碼示例,有需要的朋友可以看一下
2016-08-08
詳解Angular 自定義結(jié)構(gòu)指令
本篇文章主要介紹了詳解Angular 自定義結(jié)構(gòu)指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
淺談AngularJS中$http服務(wù)的簡(jiǎn)單用法
這篇文章主要介紹了淺談AngularJS中$http服務(wù)的簡(jiǎn)單用法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
AngularJS語(yǔ)法詳解（續(xù)）
本文續(xù)上文，接著介紹AngularJS語(yǔ)法，和上文一樣，都是通過(guò)示例來(lái)向大家分析說(shuō)明，非常不錯(cuò)的一篇文章，推薦給大家。
2015-01-01
Angular中使用ui router實(shí)現(xiàn)系統(tǒng)權(quán)限控制及開(kāi)發(fā)遇到問(wèn)題
這篇文章主要介紹了Angular中使用ui router實(shí)現(xiàn)系統(tǒng)權(quán)限控制及開(kāi)發(fā)遇到問(wèn)題的相關(guān)資料,本文分步驟介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
淺談Angular中ngModel的$render
下面小編就為大家?guī)?lái)一篇淺談Angular中ngModel的$render。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例
這篇文章主要介紹了AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例的相關(guān)資料,希望大家通過(guò)本文實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下
2017-09-09
Angular 根據(jù) service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive，需要的朋友一起學(xué)習(xí)吧
2016-04-04
AngularJS中的緩存使用
一個(gè)緩存就是一個(gè)組件，它可以透明地儲(chǔ)存數(shù)據(jù)，以便以后可以更快地服務(wù)于請(qǐng)求。這篇文章主要介紹了AngularJS中的緩存使用，有興趣的可以了解一下。
2017-01-01