AngularJS - issue with dropdown menu in <select> tag, can't have 2 custom option while using ng-option

Question

I have a <select> that loops over an array of data and displays the selections available in the dropdown list.

the markup is like this:

 <select required class="form-control btn-primary btn dropdown-toggle"
    ng-options="s.name for s in list track by s.name" ng-model="list">
    <option selected value=""></option>
    <option value="" ng-click="">Split</option>
</select>

What I want is, to have the preselected value as an empty string, I achieved that with:

<option selected value=""></option>

but then I need a second custom <option> tag besides all the <option> tags that get generated by the ng-option,

in this tag I need to show a string, in this case "split", and there will be a ng-click on this option so the user can click on it and a second dropdown will appear.

The problem is the second <option> tag it's not shown, only the first one, and I did some tests, and apparently I can show only one option tag besides the ones from ng-option.

Is there a solution for this?

What I need as end result is my option list generated by ng-option, then a preselected option that is EMPTY (it shows when the user loads the page), and a second option with a custom string that will be used like a button.

Here a jsfiddle where you can see that the second custom option tag isnt shown

https://jsfiddle.net/0xyt24sh/10/

thank you

JoshG · Accepted Answer · 2018-06-05 10:46:25Z

1

It's impossible to have more than one hard-coded option with ngOptions, as explicitly mentioned in the documentation:

Optionally, a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option.

A workaround might be to use ngRepeat:

<select class="form-control btn-primary btn dropdown-toggle" ng-model="selection">
    <option value="" selected></option>
    <option ng-repeat="s in list">{{s.name}}</option>
    <option ng-click="" value="split">Split</option>
</select>

Updated fiddle: https://jsfiddle.net/0xyt24sh/17/

answered Jun 5, 2018 at 10:46

JoshG

6,7752 gold badges42 silver badges64 bronze badges

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

1 Comment

AJ- Over a year ago

thank you, I used in the past multiple hard-coded option tags, but as you said, I think the rest was looped over a ng-repeat, and I forgot so I thought it should be possible

Protozoid · Accepted Answer · 2018-06-05 10:42:12Z

0

From ngOptions documentation:

Optionally, a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option. See example below for demonstration.

In this case, ngOptions isn't fit for your problem; Instead, you can use <option>s with ng-repeat, as such:

<select required class="form-control btn-primary btn dropdown-toggle" ng-model="selected">
   <option selected value=""></option> 

   <option ng-repeat="item in list track by item.code">
     {{item.name}}
   </option>

   <option value="split" ng-click="doSomething()">Split</option>       
 </select>

Working JSFiddle here

answered Jun 5, 2018 at 10:42

Protozoid

1,2071 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS - issue with dropdown menu in <select> tag, can't have 2 custom option while using ng-option

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related