解決ng-repeat產(chǎn)生的ng-model中取不到值的問題
最近遇到在ng-repeat產(chǎn)生的textarea中綁定ng-model后，在js中取不到ng-model值的問題。
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)過查詢發(fā)現(xiàn)原因是，ng-repeat會(huì)產(chǎn)生子作用域，而js中的scope是父作用域的，Angularjs中的作用域向上查找，所以是不能取得ng-repeat中的綁定值的。
解決方案就是把子scope中的值通過$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中取不到值的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)Angular中單向數(shù)據(jù)流的深入理解
這篇文章主要給大家介紹了關(guān)于對(duì)Angular中單向數(shù)據(jù)流的深入理解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03
Angular中實(shí)現(xiàn)樹形結(jié)構(gòu)視圖實(shí)例代碼
近兩年當(dāng)中使用Angular開發(fā)過很多項(xiàng)目，其中也涉及到一些樹形結(jié)構(gòu)視圖的顯示，最近的在項(xiàng)目中封裝了大量的組件，一些組件也有樹形結(jié)構(gòu)的展示，所以寫出來總結(jié)一下。2017-05-05
詳解Angular-ui-BootStrap組件的解釋以及使用
這篇文章主要介紹了詳解Angular-ui-BootStrap組件的解釋以及使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動(dòng)畫的方法
本篇文章主要介紹了angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動(dòng)畫的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎(chǔ)資料,并有實(shí)例代碼,有需要的同學(xué)可以參考下2016-08-08
本篇文章主要介紹了angular指令筆記ng-options的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令2016-03-03
詳解AngularJS通過ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴
本篇文章主要介紹了詳解AngularJS通過ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Angularjs中如何使用filterFilter函數(shù)過濾
這篇文章主要介紹了Angularjs中如何使用filterFilter函數(shù)過濾的相關(guān)資料,需要的朋友可以參考下2016-02-02
本文主要介紹AngularJs E2E Testing的資料，這里整理了詳細(xì)的資料，及簡單代碼示例，有興趣的小伙伴可以參考下2016-09-09