Error on a dropdown select [duplicate] - html

Question

This question already has an answer here:
ngRepeat:dupes - duplicates in repeater with nested ngrepeat and empty strings
(1 answer)
Closed 5 years ago.
I found this error on a dropdown menu like this:
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select class='opzioni' ng-model="nazioni">
<option ng-repeat="nazione in nazioni" value='nazione'>{{nazione}}
</option>
</select>
</div>
In my controller i have this code:
$scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia', 'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda', 'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia', 'Svizzera', 'Ucraina'];
When i run it and i select a Nation, i can read this error in the console:
angular.js:14525 Error: [ngRepeat:dupes]
http://errors.angularjs.org/1.6.4/ngRepeat/dupes?p0=nazione%20in%20nazioni&p1=string%3An&p2=n
I got the same error again when I use a list that come from database, like this one :
$http.get('/api/teams').then(function(response){
$scope.teams = response.data;
console.log(response.data);
});
And in the html :
<div class='SquadraCasa'>
<span>Seleziona Squadra Casa: </span>
<select class='opzioni' ng-model="teams">
<option ng-repeat="team in teams" value='team.Nome'>{{team.Nome}}
</option>
</select>
</div>

Answer 1

Add the track by $index
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select class='opzioni' ng-model="nazioniSelected">
<option ng-repeat="nazione in nazioni track by $index" value='{{nazione}}'>{{nazione}}
</option>
</select>
</div>
also can improve like this,
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select ng-options="item as item for item in nazioni track by $index" class='opzioni' ng-model="nazioniSelected">
<option value="">Select...</option>
</select>
</div>
This is because your array isnt identificable. Also you ng-model need to be diferent to the array you iterate.

Answer 2

Aside from your error, it is worth pointing out that the 'value' of all your dropdown items will be the same, as you only update the displayed text dynamically based on which item you're currently iterating over
So I'd try this:
<option ng-repeat="nazione in nazioni" value='{{nazione}}'>{{nazione}}
</option>

Answer 3

Remove the value attribute from the option tag:
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select class='opzioni' ng-model="nazioni">
<option ng-repeat="nazione in nazioni">{{nazione}}
</option>
</select>
</div>
or change it to bind to the data properly:
<div class='SquadraCasa'>
<span>Seleziona Squadra Casa: </span>
<select class='opzioni' ng-model="teams">
<option ng-repeat="team in teams" value='{{team.Nome}}'>{{team.Nome}}
</option>
</select>
</div>
Having a simple string in the value attribute ('nazioni') will result in all your options having the same value ('nazioni') when you really want the values to be each of the nations in the list you provided.

Answer 4

You have duplicate keys, use track by $index a.e.:
<select class='opzioni' ng-model="selectedNazioni">
<option ng-repeat="nazione in nazioni track by $index" >{{nazione}}
</option>
</select>
Controller:
$scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia', 'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda', 'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia', 'Svizzera', 'Ucraina'];
// set default value
$scope.selectedNazioni = 'Austria';
DEMO