tengo un botón, que al hacer click sobre él, genera 3 dropdowns dinámicos( se alimenta una variable llamada $scope.dropdown, con la lista de los animales que contiene el array $scope.aAnimals, actualmente existen 3 elementos, pero en un futuro pueden ser "n" elementos).
Despues de esto, quiero que cada dropdown tenga un valor diferente, por ejemplo, que el primer dropdown tenga el primer animal, el segundo dropdown el segundo, el tercer dropdown el siguiente.
Mi problema esta en que quiero eliminar el item elegido. pero siempre se elimina el ultimo. que puedo hacer?
<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]; //El modelo de cada Select
}
}
$scope.delete=function(item){
var index = $scope.dropdown.indexOf(item);
$scope.dropdown.splice(index, 1);
}