Add an extra button as option inside select tag so that on click on the button it opens another dialog

Question

I have a select dropdown which shows a list of names (using ng-repeat). If there are no names, I want to show a button 'Add Names' and on click on the button I want to perform some function.

I am using a normal select tag and using ng-repeat to show the list of names.

<select ng-model='selectedName' ng-change="onChange()">
    <option ng-repeat='name in names'>{{name}}</option>
    <option ng-if='!names.length'>
        <button ng-click="addName()">Add Name</button>
    </option>

In controller:

$scope.names = ['a','b','c','d'];

I expected that on click of the button it will call the addName() function but it is calling onChange() which is on select tag.

score 0 · Answer 1 · answered Aug 02 '19 at 08:31

The only permitted contents for an <option> element is text.¹

Content categories: None.
Permitted content:  Text, possibly with escaped characters (like &eacute;).
Tag omission:       The start tag is mandatory. The end tag is optional if this element is immediately followed by another <option> element or an <optgroup>, or if the parent element has no more content.
Permitted parents:  A <select>, an <optgroup> or a <datalist> element.
Permitted ARIA roles:   None
DOM interface:      HTMLOptionElement

For more information, see

MDN HTML Reference <option> element

Thank you for the response. But is there any other way so that i can perform ng-click operation. I cannot change the select tag. — Priyanka Patnala, Aug 02 '19 at 08:45

Add an extra button as option inside select tag so that on click on the button it opens another dialog

1 Answers1