Angular JS select menu item appearing twice

Question

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:

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">

might be because of value: '', the default value of select box is ''. — Anupam Singh
– Anupam Singh, Commented May 4, 2016 at 13:24

Gabriel Câmara · Accepted Answer · 2016-05-04 13:40:08Z

2

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/

answered May 4, 2016 at 13:40

Gabriel Câmara

1,24915 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Over a year ago

That did remove the duplicate, thanks. I inherited this menu from someone else and I was unsure what I could change and have it still work

MBielski · Accepted Answer · 2016-05-04 13:24:12Z

0

It has been my experience that this is caused by including the Bootstrap JS into your app. Remove the Bootstrap and you'll remove your duplicate. Also, the blank option is created by Angular because you do not have a default value for your ng-model. Set that and your blank option will go away.

answered May 4, 2016 at 13:24

MBielski

6,6103 gold badges36 silver badges46 bronze badges

3 Comments

Steve Over a year ago

The rest of the project uses Bootstrap. Also I have other menus which are not duplicating options.

Steve Over a year ago

For some reason I can set the default value of the model to one of the menu items ` $scope.regionFilter = 'Europe';` but the menu won't display the item. And $scope.regionFilter = $scope.regionMenu[0]; does not work at all.

Shashank Trivedi Over a year ago

You need to do it like this $scope.regionFilter = { region : $scope.regionMenu[2] }

Shashank Trivedi · Accepted Answer · 2016-05-04 13:31:24Z

0

You might like to do it as follow in HTML -

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

and remove 'Show All' item from array in JS.

answered May 4, 2016 at 13:31

Shashank Trivedi

2522 silver badges16 bronze badges

2 Comments

Steve Over a year ago

I need to have "show all" set the filter to empty, so all the items in the table are shown. If "EU" is chosen only the countries with a region "Europe" show. I then need to be able to re-set the menu to "show all"

Shashank Trivedi Over a year ago

It will work in that case also. You can reset using $scope.regionFilter = { region: null }

CherryDT · Accepted Answer · 2016-05-19 09:10:43Z

0

Would you check this Plunker is that what you need?

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

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

</html>

I just updated your example. if you can share your regionFilter.region. you can also check this example

edited May 19, 2016 at 9:10

CherryDT

29.4k5 gold badges56 silver badges86 bronze badges

answered May 4, 2016 at 13:35

Mohamed NAOUALI

2,1321 gold badge25 silver badges29 bronze badges

3 Comments

Steve Over a year ago

There is no regionFilter, it's just being used for the repeater: <tr ng-repeat="i in filteredItems = (iso3166 | filter: regionFilter)">

Mohamed NAOUALI Over a year ago

@Steve would you check my plunker and let me know if there is something wrong that I may correct :)

Steve Over a year ago

This does not work in my file: $scope.regionFilter = $scope.regionMenu[0]; It causes the menu's data and the filtered dataset in the repeater to not load at all. Oddly, in your Plunkr when I choose "EU" the menu is then empty. I need to choose something else, and then EU works.

Collectives™ on Stack Overflow

Angular JS select menu item appearing twice

4 Answers 4

1 Comment

3 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related