How to call AngularJS function from select > option

Question

I need to call an AngularJS function from selection:

<select ng-model="selection" >
<option onselect="angular.element(this).scope().functionCall('one')">one</option>
<option onselect="angular.element(this).scope().functionCall('two')">two</option>
<option onselect="angular.element(this).scope().functionCall('three')">three</option>
<option onselect="angular.element(this).scope().functionCall('four')">four</option>
</select>

However, the function never gets called.

In the controller,

$scope.functionCall = function(value){
// do stuff with value
}

How can I call the function.

Use $scope.$watch in your controller to do something when the selected value changes — Greg
– Greg, Commented Sep 11, 2014 at 22:29

Fedaykin · Accepted Answer · 2014-09-11 22:44:24Z

34

It's recommended that you use ng-change for that matter, the result may be the same as Cyril's, but the code is more readable and testable, also it is considered a better practice:

Here is a plunker demonstrating it in action: http://plnkr.co/edit/7GgwN9gr9qPDgAUs7XVx?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.listOfOptions = ['One', 'Two', 'Three'];

  $scope.selectedItemChanged = function(){
    $scope.calculatedValue = 'You selected number ' + $scope.selectedItem;
  }
});

And the HTML:

<select ng-options="option for option in listOfOptions" 
        ng-model="selectedItem"
        ng-change="selectedItemChanged()">
</select>

Hope that helps. Thanks.

answered Sep 11, 2014 at 22:44

Fedaykin

4,5723 gold badges25 silver badges32 bronze badges

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

3 Comments

A_J Over a year ago

I am getting 'undefined' when I am trying to print '$scope.selectedItem' inside the function using console.log

Hà Link Over a year ago

@A_J Angular looks for an object to retrieve value, then ng-model need to assign to an object. I did and it worked.

zokaee hamid Over a year ago

I used this way : ng-change="selectedItemChanged( selectedItem )"

Abhay Naveen · Accepted Answer · 2016-12-01 07:48:30Z

2

A Little bit to add on Cyril's and Fedaykin answers:

HTML code

<select ng-options="option for option in listOfOptions" 
    ng-model="selectedItem"
    ng-change="selectedItemChanged()">

Controller Code

app.controller('MainCtrl', function($scope) {
  $scope.listOfOptions = ['One', 'Two', 'Three'];

  $scope.selectedItemChanged = function(){
   console.log($scope.selectedItem);
  }
});

You will notice that when the select option is changed, a function gets called which will give the you the value of the current selected value.

answered Dec 1, 2016 at 7:48

Abhay Naveen

713 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:28Z

0

Here's what you could do :

HTML

<div ng-controller="YourController">
    <select ng-model="selection" ng-options="choice for choice in choices"></select>
</div>

YourController :

$scope.choices = ["first choice", "second choice",...]
$scope.$watch('selection', function(newVal, oldVal){
    switch(newVal){
        case 'first choice':
            [do Some Stuff]
            break;
        case 'second choice':
            [do Some Stuff]
            break;
        default:
            [well, do some stuff]
            break;
    }
}

BTW: I decided to put the options in the javascript, but what you did also works.

EDIT : ng-change VS $watch, see this question

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Sep 11, 2014 at 22:34

Cyril Duchon-Doris

14.2k12 gold badges92 silver badges181 bronze badges

3 Comments

user3779089 Over a year ago

Thanks. That's helpful.

Fedaykin Over a year ago

your ng-options will not populate the select element properly that way... it shoud be choice for choice in choices

Cyril Duchon-Doris Over a year ago

And yes your answer feels better than mine.

Mohamed Abdullah J · Accepted Answer · 2015-08-26 10:54:02Z

0

First, onselect is not a angular keyword, It's a normal javascript keyword

You should use ng-change param in select or use like below..,

In HTML code you have to use like this.,

<select ng-model="selection" >
<option onselect="functionCall('one')">one</option>
<option onselect="functionCall('two')">two</option>
<option onselect="functionCall('three')">three</option>
<option onselect="functionCall('four')">four</option>
</select>

and in the controller

function functionCall(value){
//do stuff with value
}

answered Aug 26, 2015 at 10:54

Mohamed Abdullah J

3593 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to call AngularJS function from select > option

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related