Create ng-model dynamically with {{expression}} doesn't work?

Question

I am working on an angular project where I need to create a form based on an array of questions. I would like to create ng-model for each question in the array.

So I have come up with something like the following, but it is not working.

<div class="form-group" data-ng-repeat="question in questions">
    <label for="{{question.label}}" class="col-md-2 control-label">
        {{question.label}}:
    </label>
    <div class="col-md-10">
        <input type="text" 
               class="form-control" 
               name="{{question.label}}" 
               data-ng-model={{question.label}}
               required />
        <span class="error"
              data-ng-show="formQuickView.{{question.label}}.$error.required">
            Required!
        </span>
    </div>
</div>                   

Could someone help me out for this one ?
Thanks heaps in advance.

Answer 1

ng-model does not work with {{}} it considers the string passed to it as an expression referencing a scope property.

I'm not sure if I understand your code correctly. In your code, I think data-ng-model="question.label" should work.

If you want to reference a dynamic field specified in your label field. Try this with your ng-model:

<input type="text" ng-model="question[question.label]"/>

DEMO

Answer 2

formQuickView[question.label].$error.required

This is regular JavaScript syntax. You want to access the property of formQuickView with the name defined by question.label.

Update

Somehow I missed the main point, the ng-modelexpression. Basically you do the same thing here. You have two choices (technically only one):

• Add an object to your scope, say questions, then use questions[question.label].
• When you have a form, then give it a name and an object is added automatically. E.g. <form name="questions" .... and the same as above.