Steve Steve - 6 months ago 51
AngularJS Question

Angular JS select menu item appearing twice

I have a select menu populated from an array of objects:

$scope.regionMenu = [
{
label: 'Show All',
value: ''
},
{
label: 'EU',
value: 'Europe'
},
{
label: 'Dest via Air US OB',
value: 'Dest via Air US OB'
},
{
label: 'Dest via Air UK OB',
value: 'Dest via Air UK OB'
},
{
label: 'Supplements',
value: 'Supplements'
},
{
label: 'Used Items',
value: 'Used Items'
},
{
label: 'YOIHIMBE',
value: 'YOIHIMBE'
}
];


And the menu itself:

<select ng-model="regionFilter.region" ng-options="s.value as s.label for s in regionMenu track by s.value"></select>


But for some reason I can't figure out, I have a blank menu item at top and "show all" is in there twice:

enter image description here

Why is this?

UPDATE Code generated in the html:

<select ng-model="regionFilter.region" ng-options="s.value as s.label for s in regionMenu track by s.value" class="form-control input-xs ng-pristine ng-valid ng-touched" xxx-ng-change="updateRegion()">
<option value="?" selected="selected"></option>
<option label="Show All" value="">Show All</option>
<option label="Show All" value="">Show All</option>
<option label="EU" value="Europe">EU</option>
<option label="Dest via Air US OB" value="Dest via Air US OB">Dest via Air US OB</option>
<option label="Dest via Air UK OB" value="Dest via Air UK OB">Dest via Air UK OB</option>
<option label="Supplements" value="Supplements">Supplements</option>
<option label="Used Items" value="Used Items">Used Items</option>
<option label="YOIHIMBE" value="YOIHIMBE">YOIHIMBE</option>




UPDATE 2

We did the filter this way to have both a text field and the menu filter:

<input type="text" id="countrySearch" placeholder="Country" ng-model="regionFilter.$" size="15">

Answer

Here in AngularJS Documentation about Track By

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.

That's because you're using track by and associating to it's value, but it's label seems to be what identifies your menu.

Here's an example
https://jsfiddle.net/nhkk98qf/2/

Comments