textArea在角度js中的双向绑定

时间:2014-06-06 10:21:06

标签: javascript angularjs

我有一个用户必须回答的问题列表。为此,我已准备好表格。

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"
            }
        ]
    }
 }

现在,当用户提交表单时,我应该收到用户发布的所有问题的评论。

2 个答案:

答案 0 :(得分:6)

我不是角度专家,但我认为你需要在textarea元素中添加ng-model。

<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>

而且,您还需要添加评论&#39;每个评论类型问题的字段。例如:

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

        }

请注意,您可能不需要添加&#34;评论&#34;字段,如果有一个强制添加字段&#39;我不知道的angularjs的标志。

答案 1 :(得分:4)

你必须将ng-model绑定到textarea,即使你没有&#34;回答&#34;它也能正常工作。初始json数据中的变量。我添加了一个用于演示目的的按钮。 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>