CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-model
Nico AD
Nico AD

Reputation: 1709

angular using ng-model with expression in ng-repeat

I have to make a form for a multilanguage content management system with angularJS.

my language list is defined like this in the angular scope : 

$scope.languages = 
[
 {id:0,'name':'English'},
 {id:1, name:'French'}
  /* ... */
]

in my html I make a form like this :

    <div ng-repeat="lang in languages">
        <label for="titlel{{ lang.id }}">{{ lang.name }}</label>
        <input type="text" class="form-control"  ng-model="editquestion['titlel{{ lang.id}}']" id="titlel{{ lang.id }}" />
    </div>

It's not working properly, the labels are correct , but the ng-model binding don't work , no text added to the text field even if there is data is editquestion.titleX , and when I type some text in the html input field, the typed text is replicated in all fields.

I checked with the inspector and the ng-model attribute looks correct.

screenshots of the issue here

http://accessdev.s3.amazonaws.com/temp/replicated1.PNG

http://accessdev.s3.amazonaws.com/temp/replicated2.PNG

the issue is not present if I make the html code manually , ex : 

 <label for="textl0">English</label>
 <textarea class="form-control" ui-tinymce="tinymceOptions" ng-model="editquestion.textl0"></textarea>

 <label for="textl1">French</label>
 <textarea class="form-control" ui-tinymce="tinymceOptions" ng-model="editquestion.textl1"></textarea>

Upvotes: 1

Views: 1062

Answers (1)

plamut
plamut

Reputation: 3206

ng-model expects an expression (which is then evaluated in the current scope), it does not work in the same way as e.g. setting an ID for a label. Try changing your input to the following:

<input ... ng-model="editquestion['titlel' + lang.id]" />

Upvotes: 1

Related Questions