I am facing an issue with creating HTML textarea elements for each member of an array. Despite consulting the AngularJS documentation and attempting different track by expressions, I am unable to render them.
The problem arises when a user inputs the same text in multiple textareas. It appears that Angular is treating the textarea value as a unique key. One potential solution could be to append or remove an arbitrary identifier before the text, although this seems like a workaround.
To clarify, the textareas are displayed properly until the user submits the form (using JavaScript only - no server round-trip), after which subsequent code processes and displays the input.
Thank you in advance.
The specific error message received is:
Duplicates in a repeater are not allowed.
Use 'track by' expression to specify unique keys.
Repeater: openEndedQuestion in openEndedQuestions track by openEndedQuestion.id,
Duplicate key: undefined
The provided HTML code is:
<tr ng-repeat="openEndedQuestion in openEndedQuestions">
<td width="375" style="font-size: 18px;">
<b>{{openEndedQuestion}}</b><br>
<textarea id="openEndedAnswer_{{$index}}" cols="80"></textarea>
</td>
</tr>
The next stage of HTML code is:
<tr ng-repeat="openEndedAnswer in openEndedAnswers">
<td width="375" style="font-size: 18px;">
<b>{{openEndedAnswer}}</b>
</td>
<td width="225">
<span style="font-size: 35px; padding: 2px; color: #468847;"
ng-repeat="starIndex in [0, 1, 2, 3, 4]"
ng-click="povStarTracker.setStarRating($parent.$index, starIndex + 1)"
ng-class="povStarTracker.getClassForStar($parent.$index, starIndex)"></span>
</td>
</tr>
The JSON data behind this issue is:
"openEndedQuestions" : [
"Do you think the coach is being fair?",
"Should the coach give all of his players a chance to play in the games?",
"Should Austin say anything about this to his coach?",
"What could Ryan say to Austin?"
]