ng-model bind to array in an array

Question

When creating a new poll, the question and all the potential answers need to be send to the controller once submitted. I know how to work with ng-model, but I have no clue how I can bind it to an array in that array.

For example, my array looks like this:

 var question = {
    "question":"",
    "choices": [
      {
        "id":1,
        "choice": "Yes"
      },
      {
        "id"=2,
        "choice": "No"
      }
    ]
  }

Form

      <form novalidate name="questionForm" ng-submit="addVote(vote)">
        <input placeholder="Type your question..." name="question" ng-model="vote.question" />
        <input ng-model="" value="Choice 1" />
        <input ng-model="" value="Choice 2" />
<button type='submit' class="circle-btn btn-send ion-ios-paperplane"></button>
      </form>

The input[name=question] will obviously send whatever is in that input box to vote.question. But how do I add those potential answers to the choices array?

Note: it's possible to add more input fields

EDIT

So in short: I need to be able to bind {id:1, choice: value of input}

TonyW · Accepted Answer · 2015-12-24 16:33:41Z

2

You can make your vote variable an object literal that contains the question and the array of answer choices (could be empty array):

In the controller:

$scope.vote = {
  "question": 'question stem title here',
  "answerChoices": [
    {"id": 1, "choice": 'Yes'},
    {"id": 2, "choice": 'No'},
  ]
};

In the HTML:

<form novalidate name="questionForm" ng-submit="addVote(vote)">
        <input placeholder="Type your question..." name="question" ng-model="vote.question" />
        <span ng-repeat="choice in vote.answerChoices track by $index">
          <input class="form-control" ng-model="vote.answerChoices[$index]" />
        </span>
<button type='submit' class="circle-btn btn-send ion-ios-paperplane"></button>
      </form>

You can push the new answer choices to the vote.answerChoices array programmatically

edited Dec 24, 2015 at 16:33

answered Dec 24, 2015 at 16:31

TonyW

18.9k42 gold badges117 silver badges190 bronze badges

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

6 Comments

JB Nizet Over a year ago

Why use vote.answerChoices[$index]to refer to the current choice? That's what the choice variable is for.

TonyW Over a year ago

Because OP said Note: it's possible to add more input fields. The vote.answerChoices[$index] is used to track the changes of the answer choices, but not for referring to the current choice.

JB Nizet Over a year ago

If you add more fields, the ng-repeat will have one more element displayed, and the current element in the loop is still choice.

Greg Over a year ago

But I don't need to display anything, I have to send my new vote to the database. So if I use an ng-repeat then it won't show anything because the answerChoices array is empty

TonyW Over a year ago

I don't see the OP has ever said current element or choice. I assume from his code that he also needs ng-model for each answer choice, and that is another reason I use vote.answerChoices[$index]

|

JB Nizet · Accepted Answer · 2015-12-24 16:31:20Z

1

Just use ng-repeat to iterate on the choices, and display one input per element of the array, bound to the choice field of this element:

<div ng-repeat="element in vote.choices">
  <input ng-model="element.choice" />
</div>

answered Dec 24, 2015 at 16:31

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

3 Comments

Greg Over a year ago

The ng-repeat won't display anything because the array in the array is empty at first.

JB Nizet Over a year ago

Then make sure it's not. Prepopulate the array with two choices, or add a button that adds an element to the choice array

Greg Over a year ago

Oh, this is actually a better solution! Thank you very much

Collectives™ on Stack Overflow

ng-model bind to array in an array

Form

Note: it's possible to add more input fields

EDIT

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Form

Note: it's possible to add more input fields

EDIT

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related