I have a table that has rows added by the user pressing a button. In this table there is a dropdown list that displays to values. My issue is that selecting something on one dropdown changes all of them. Can someone explain what I'm doing incorrectly?
.HTML Code
<button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add Entry</button>
<tbody data-ng-repeat="choice in choices">
<tr>
<td><input type="text" placeholder="Account Name" ng-model="item.AccountName" style="width:104px;"></td>
<td><select ng-model="type.value" ng-options="v for v in type.values" style="width:80px"></select></td>
</tr>
</tbody>
.JS FILE
$scope.type = {
"type": "select",
"name": "Cash",
"value": "Cash",
"values": ["Cash", "Securities"]
};
$scope.choices = [{ id: 'choice1' }];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({ 'id': 'choice' + newItemNo });
};
$scope.showAddChoice = function (choice) {
return choice.id === $scope.choices[$scope.choices.length - 1].id;
};
You have assigned the same ng-model to select in loop. All will point same variable.ng-model="type.value"
Instead of this binding same value to all, you can use choise.type_value
as an example. This will store value of each choise in its own variable.