Dynamic ng-model into ng-repeat AngularJS

Question

I'm trying to generate dynamically ng-model directive in ng-repeat but I receive an error from browser. We get dynamically attributes of a type and I would like to set its in DOM.

I'm recieving this error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{'attribute.'+attribute.label}}] starting at [{'attribute.'+attribute.label}}].

Click here

<div class="form-group" ng-repeat="attribute in objectType.objectAttributes | orderBy : attribute.order">
     <div class="col-sm-10" ng-if="attribute.multivalued==false">
          <input type="{{attribute.type}}" class="form-control"
              ng-model="{{'attribute.'+attribute.label}}">
     </div>
</div>

Do you have any idea which can help me to solve this problem? Thank you!

has nothing to do with angular... as in all javascript use `[]` notation for variable properties — charlietfl, Oct 12 '15 at 14:44
it's not exactly clear why you need to do this in the first place, but your syntax is completely wrong. you should be using bracket notation to access the dynamic properties, rather than dot notation. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors — Claies, Oct 12 '15 at 14:49

score 1 · Accepted Answer · answered Oct 13 '15 at 15:01

This isn't correct form and an error occurs if I tried but finally I did this and then I get the whole list of attributes. If change the input then change attribute.value into each attribute. It 's very tricky but works! Thank you!

<div ng-repeat="attribute in indoor.values | orderBy : attributes[$index].order">
     <input type="{{attributes[$index].type}}" class="form-control"
          ng-model="attribute.value">
</div>

score 0 · Answer 2 · answered Oct 12 '15 at 15:49

0

You can do it like this way :

ng-model="attribute.{{attribute.label}}"

answered Oct 12 '15 at 15:49

Pritam Banerjee

17,953
10
93
108

score 0 · Answer 3 · answered May 27 '16 at 09:56

don't use {{}} in ng-model. Use [] for dynamic ng-model. In your case use like this

<div class="form-group" ng-repeat="attribute in objectType.objectAttributes | orderBy : attribute.order">
 <div class="col-sm-10" ng-if="attribute.multivalued==false">
      <input type="{{attribute.type}}" class="form-control"
          ng-model="value1[attribute.label]">
 </div>

where "value1" in ng-model is your input value. But remember use $scope.value = [] in your controller. I hope it helps you

Dynamic ng-model into ng-repeat AngularJS

3 Answers3