textArea在angular js中的雙向綁定

我有一個用戶必須回答的問題列表。爲此，我準備了一個表單。textArea在angular js中的雙向綁定

HTML表單是

<div class="list" ng-repeat="question in questions.data.Question" > 
     <div class="item item-divider"> 
     {{question.text}} 
    </div> 
    <label class="item item-input" ng-if="question.type =='comment'"> 
     <textarea placeholder="Comments"></textarea> 
    </label> 
</div>

現在我的JSON字符串是

{ 
    "sucess": true, 
    "message": "record(s) fetched sucessfully", 
    "data": { 
     "Question": [ 
      { 
       "id": "4", 
       "text": "how was it?", 
       "type": "comment" 
      }, 
      { 
       "id": "6", 
       "text": "how was it?", 
       "type": "comment" 
      } 
     ] 
    } 
}

現在，當用戶提交表單我應該得到的評論用戶已張貼的所有問題。

來源

2014-06-06 Aks

你的問題是什麼？什麼不起作用？你有什麼嘗試？ – StuR

我希望用戶在點擊提交按鈕時發佈的所有問題的答案。 – Aks

我不是角度專家，但我認爲你需要將ng模型添加到textarea元素。

<div class="list" ng-repeat="question in questions.data.Question" > 
     <div class="item item-divider"> 
      {{question.text}} 
     </div> 
     <label class="item item-input" ng-if="question.type =='comment'"> 
      <textarea placeholder="Comments" ng-model="question.comments"></textarea> 
     </label> 
</div>

而且，您還需要爲每個評論類型問題添加「評論」字段。例如：

 { 
      "id": "6", 
      "text": "how was it?", 
      "type": "comment", 
      "comments": "" 

     }

注意，你可能並不需要，如果有一個增加「意見」場「力加場」標誌，我是不知道的angularjs。

來源

2014-06-06 10:26:37 holgac

但想要在其他模式中發佈它不在同一服務 – Aks

這個提交按鈕有什麼作用？提交表格？你是否在該表單中添加了ng-submit指令？如果您想提交用戶發佈的所有評論，則只需在控制器中的ng-submit調用函數中發送模型即可。當您放置DOM元素的模型發生變化時，模型會自動更新。 – holgac

沒有按鈕的ng-clik我已經調用了傳遞模型的函數 – Aks

您必須將ng-model綁定到textarea，即使您在初始json數據中沒有「answer」變量，它也可以工作。我添加了一個用於演示目的的按鈕。 JSFIDDLE

<div id="qApp" ng-controller="qAppCntrl"> 
<div class="list" ng-repeat="question in questions.data.Question track by $index" > 
    <div class="item item-divider"> 
    {{question.text}} 
    </div> 
    <label class="item item-input" ng-if="question.type =='comment'"> 
    <textarea placeholder="Comments" ng-model="question.answer"></textarea> 
    </label> 
</div> 
<button ng-click="submit()">Post</button> 
</div>

來源

2014-06-06 12:04:27 Satish

textArea在angular js中的雙向綁定

回答

相關問題