How to change dropdown list label text on click?

Question

I have a <select> element in my HTML that is bound via ng-model to an object in the scope.

Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).

Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/

I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.

How do I make this work like I want?

Austin Greco · Accepted Answer · 2014-06-19 18:54:45Z

2

ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:

http://jsfiddle.net/TXPJZ/562/

answered Jun 19, 2014 at 18:54

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

How to change dropdown list label text on click?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related