AngularJS : How to trigger an action on select option?

Question

I am new in Angular. I try to print a form. In the form i have a select input. I dont know how to do an action when the user select an option. I want to retrieve datas from server when the select option is made. I just need an example please.

Answer 1

Although this is an old question I would like to add Sunils comment as an actual answer as it is much simpler than doing a custom directive. If you want to trigger some function when the user selects another option, just use ng-change on the select tag.

In Controller-as Syntax it would look like this. Note that it is important to have ng-model in there even if you wouldn't need it somewhere else as ng-change is watching out for "yourModel" if I understood the documentation correctly.

<div ng-controller="yourController as controllerName">
[...]
  <select ng-model="yourModel" ng-change="controllerName.yourFunction(yourArguments)">
    Your options here (or use ng-options on the select tag)
  </select>
[...]
</div>

In the controller you then define what is supposed to happen:

this.yourFunction = function(yourArguments){ 
  //do your things here, e.g. http request 
}

Answer 2

You Can write a directive like this :

           yourApp.directive('changed',function(){
               return function(scope,elem,att){
                   elem.bind('change',function(){
                       alert('hi');
                   })
               }
           });

And then you can use it in your view like this :

         Your SELCET TAG here :

         <select changed>
            <option value="1">1</option>
            <option value="2">2</option>
         </select>

Also if you want to pass anything from the select to your directive you can do this :

         <select changed="passthis">
            <option value="1">1</option>
            <option value="2">2</option>
         </select>

And then in your directive you can get what ever you've sent:

           yourApp.directive('changed',function(){
               return function(scope,elem,att){
                   elem.bind('change',function(){
                       // below will alert: "passthis"
                       alert(att.changed);
                       // bellow will alert what ever option user has choosed
                       alert(elem.value());

                   })
               }
           });

You want to run a $http request on selection changed ? easy :

           yourApp.directive('changed',function($http){//notice here I injected $http
               return function(scope,elem,att){
                   elem.bind('change',function(){
                       $http.post('YourUrl',{yourDataTosend})
                       .success(function(msg){
                         alert("msg from your backend: ",msg)
                        }).error(function(){
                            alert('Error');
                         })
                   })
               }
           });