angularjs : calling a function in select element

Question

How to call a function in the case given below?

<select class="dropdown">
    <option ng-repeat="group in myGroups" ng-model="group.Name" ng-change="myFunction(group.Id)">{{group.Name}}</option>
</select>

ng-click won't work
ng-model is needed if you want to use ng-change (I don't need ng-model in this case otherwise)
ng-change doesn't seem to call a function as well
I know I could probably just use ng-model and $watch, but since I don't think I can really use ng-model in this case I am a bit confused

So, how can I call a function inside ng-repeat select? (its not ng-select as you probably noticed)

Florian · Accepted Answer · 2014-02-17 08:22:32Z

11

Well, the option itself does not change.

What changes is the value of the select element.

So, try this:

<select ng-model="selectedGroup" ng-change="yourFunction()">
   <option ng-repeat="group in myGroups">{{group.name}}</option>
</select>

with a yourFunction on the current scopelike this:

scope.yourFunction = function() {
   console.log(scope.selectedGroup);
};

I also strongly suggest you have a look at ngOptions here.

answered Feb 17, 2014 at 8:22

Florian

3,3761 gold badge32 silver badges35 bronze badges

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

2 Comments

trainoasis Over a year ago

Thanks, I was somehow reluctant to ngOptions since it all seemed a bit hard to grasp, but now I see it's handy as it can be. I like that you answered my question directly and also pointed out that ngOptions would probably be a better solution.

leon.io Over a year ago

jsfiddle.net/YGf7d/2 is an example of ng-options being used with the ng-model on the select element

Collectives™ on Stack Overflow

angularjs : calling a function in select element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related