Currently, I am tasked with creating a form for a multilanguage content management system using angularJS.
The language list has been defined within the angular scope as follows:
$scope.languages =
[
{id:0,'name':'English'},
{id:1, name:'French'}
/* ... */
]
When attempting to create the form in my HTML, I encountered an issue:
<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>
Although the labels display correctly, the ng-model binding is not functioning properly. The text fields remain empty despite data being present in editquestion.titleX. Furthermore, any text inputted into one field is replicated across all fields.
Upon inspection, the ng-model attribute appears to be correct.
Screenshots of the issue can be viewed here:
This issue does not arise when manually coding the HTML, as seen below:
<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>