Although the example may seem unusual, I am deliberately recreating a real problem to find a solution.
When I click on a button, it generates 3 dynamic dropdowns based on a list of animals. My issue is that I want to delete a selected item, but it always deletes the last one. What can I do to solve this?
<div ng-repeat='item in dropdown track by $index'>
<select class="form-control animal" ng-model='MyAnimals[$index]'
ng-options="opt as opt.animal for opt in aAnimals">
<option value="">Select an animal</option>
</select>
<button type="button" ng-click='delete(item)' class="btn btn-default">
delete
</button>
</div>
<button ng-click='add()' >generate</button>
$scope.obj = {}
$scope.aAnimals=
[
{ "animal": "cat"}, //first dropdown
{ "animal": "dog"}, //second dropdown
{ "animal": "parrot"} //third dropdown
]
$scope.MyAnimals = [];
$scope.add=function(){
$scope.dropdown=[];
for(var i in $scope.aAnimals){
$scope.dropdown.push({ "animal": $scope.aAnimals[i].animal });
$scope.MyAnimals[i] = $scope.aAnimals[i]; //The model of each Select
}
}
$scope.delete=function(item){
var index = $scope.dropdown.indexOf(item);
$scope.dropdown.splice(index, 1);
}