1. 程式人生 > >ng-repeat產生的ng-model中取不到值的問題

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的問題

最近遇到在ng-repeat產生的textarea中繫結ng-model後,在js中取不到ng-model值的問題。html的程式碼結構如下 <div class="ques-item hide1 show9a" id="q10"> &

ng-model controller(input)

方式 作用域 -m 定義 ron spa color 控制器 strong 一.對於input綁定ng-model默認情況下載控制器中獲取不到改變的值 1.在自定義控制器中獲取不到改變的值 原因: 1.ng-model取不到值是因為$scope作用域的問題 解

ionic ng-model controller(input)

一、問題描述在使用ionic的時候,對於input繫結ng-model預設情況下載控制器中獲取不到改變的值 1.在自定義控制器中獲取不到改變的值 2.在頁面繫結可以 原因: 1.ng-model取不到值是因為$scope作用域的問題 2.<ion-content>

用angularng-repeatng-show來實現tab選項卡

new angular lis content padding col ora ack 顯示 雖然我們可以用angular中的路由來做tab選項卡,但是那會讓我們建立很多的頁面來引入,或者建立 <script type="text/ng-template" id="n

Angularjsselect 的ng-repeatng-options 用法和獲取選取

AngularJS模組化開發中,遇到幾次下拉選單實現搜尋功能的案例,現整理一下select中ng-repeat 和ng-options的用法和獲取值的方法 一,ng-repeat 1,HTML <selectng-model="selectedItems"ng-

Angular——ng-repeatng-selected

們的 blank mod clas eat strong con target tro ng-repeat 指令為集合中的每項都實例化一個模塊。每個模塊都有自己的scope,給定的循環變量將被設置為當前項,$index是他們的索引。 ng-selected 指令用於設置 &

python爬蟲-解決網頁到的資訊-”真假網頁“

首先介紹一下我所理解的“真假網頁”,“真網頁”就是我們可以直接通過網址(URL),獲取這個“真網頁”上的任何內容。“假網頁”就是我們通過URL爬取網頁資訊時得到的結果為空,這一點相信大家在寫爬蟲程式時會經常遇到。比如我們想獲取一個網頁的資訊,利用requests的get方法對

model到的,兩個進行加減乘除運算

直接看例子,shopCartInfoList為一個集合 我們看乘積之間的計算 。。。如下紅色字型 計算價格 *    和 購買數量的  乘積  <c:forEach items="${shopCartInfoList }" var="var"> <td

EL表示式在JSP介面問題。

今天寫jsp頁面,剛研究EL表示式,然後都取不出值。後來。。終於。。。解決了。 老手可以飄過,給遇到問題的朋友,提供點資料,希望有用。 在JSP介面中加上一句程式碼: 只需要在JSP中加入一句程式

Spring問題集:@value放在Spring基於java的配置檔案

在測試Spring的事務的時候需要連線資料庫,但是發現@Value的值一直就是“{${jdbc.url}}”,並沒有從配置檔案中獲取到值, 配置檔案的程式碼如下: @Configuration @ComponentScan(basePackages =

從ajax的回調函數(success等)返回

ray div eno log left 應該 var code msg 1 var strs = new Array(); 2 3 function getData() { 4 var strs2 = n

JSONObjectString 的幾種方法和對比

今天寫程式碼的時候發現以前寫JSON中取String值喜歡這樣寫: String kewen = (String)test.get("kewen"); 其實這樣寫比較挫,一般來說JSON物件中取String型別的值有這兩種方法: test.getString("name

AngularJs 在ng-repeat動態使用ng-model進行雙向資料繫結

首先說明一下功能需求: 當點選一次增加按鈕的時候,下方就會多一行輸入框; 當點選一次刪除按鈕的時候,所點選的刪除按鈕那行的輸入框會消失; 當點選列印資訊按鈕的時候,把所有輸入框中的資料讀取出來,並列印到控制檯上。 由此可看出,帶有刪除按鈕的這部分DIV是動態的。

AngularJS獲取ng-repeat動態生成的ng-model

請關注我的微信公眾號 程式碼 html <div> <div class="modal-header"> <h3 class

解決AngularJSng-repeat更新檢視的問題

最近寫AngularJS專案中,遇到一個問題,先對陣列進行賦值,ng--repeat正常工作,然後對陣列進行修改,ng-repeat似乎沒有工作,檢視沒有更新。 原因是ng-repeat會已預設值排序,由於我的陣列中的元素有重複,所以ng-repeat沒有對重複的元素進行

angularJsng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題

  我在做練習中偶然遇到這個問題,與大家分享一下。我也是剛開始接觸angularJs,相信也有人同樣遇到過。   問題描述:在使用anjularJs框架核心模組ng雙向資料繫結,在ng-repeat遍歷物件或陣列的時候,用ng-model繫結動態生成表單元素時,利用$sco

angularJSng-repeat指令!

註意 func control wid 案例 del fis cnblogs ext ng-repeat 指令: ng-repeat 指令用來遍歷一個數組重復創建當前元素; <ul ng-app="myApp" ng-controller="myAppControl

AngularJS 獲取ng-repeat的動態ng-model

con $scope 對象 文件 spec input ram ng-repeat ng-model 首先ng-model設置為$parent.conf[$index]: 用$parent的原因是ng-repeat產生的,他會為每一個input生成一個子scope對象,而

ng-repeat添加容器標簽

pan finished art row log clas ios wid -i 如UL中的循環, 我們不期望添加額外的div之類的容器標簽, 使用ng-repeat-start和ng-repeat-end可以實現 <li class="item

AngularJS的ng-repeat迴圈如何獲得被迴圈列表的索引

使用angularJS框架的話都需要引入angular.min.js檔案,這個想必各位大佬都懂得,我就不多說了。 這裡主要說說AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值。 假如有一個表格: 程式碼如下: <table class="tabl