2-way binding of textArea in angular js

Question

I have a list of question that user has to answer.For that a have prepared a form.

The html form is

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

now my json string is

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

now when user submit the form I should get the comment user has posted of all the question.

What is your question? What isn't working? What have you tried? — StuR
– StuR, Commented Jun 6, 2014 at 10:25
I want the answer that user has posted for all the question when click on the submit button. — Aks
– Aks, Commented Jun 6, 2014 at 10:55

holgac · Accepted Answer · 2014-06-06 10:26:37Z

6

I am not angular expert, but I think you need to add ng-model to the textarea element.

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

And, you also need to add 'comments' field to each comment type question. Example:

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

        }

Note that you may not need to add "comments" field if there is a 'force add field' flag for angularjs that i'm not aware of.

answered Jun 6, 2014 at 10:26

holgac

1,5391 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aks Over a year ago

but want to post it in other model not in same service

holgac Over a year ago

what does this submit button do? submits the form? Have you added ng-submit directive to that form? if you want to submit all comments that user has posted, you should just send the models in the function in your controller that ng-submit calls. The models are updated automatically when the DOM element you put ng-model in changes.

Aks Over a year ago

no on ng-clik of button i have called a function passing the model

holgac Over a year ago

what do you do in the method of ng-click? Do you want to pass this information to an another controller in the same page? If so, how do you open/populate this controller?

Satish · Accepted Answer · 2014-06-06 12:26:03Z

6

You have to bind ng-model to the textarea, it works even if you don't have the "answer" variable in your initial json data. I have added a button for demo purpose. Full example on 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>

edited Jun 6, 2014 at 12:26

answered Jun 6, 2014 at 12:04

Satish

1416 bronze badges

Collectives™ on Stack Overflow

2-way binding of textArea in angular js

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related