CODEWITHSUNDEEP
angularjs
Jebathon
Jebathon

Reputation: 4561

Angular - ng-change not firing upon select change

Please see this relevant jsFiddle

Within the code I am trying to fire a method when a different option is selected to alert the user. However no event is being trigged

HTML:

<div ng-controller = "MyCtrl"> 
<p>Term</p>
  <select id = "term" ng-change="test()">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
  </select>       

</div>

JS:

var app = angular.module('HelloApp', []);

app.controller('MyCtrl',['$scope','$element', function($scope, $element) {

    $scope.test = function () {
     alert ("changed!");   
    }


}]);

Upvotes: 3

Views: 19705

Answers (2)

Darren Wainwright
Darren Wainwright

Reputation: 30727

You have some issues.

Firstly: <div ng-controller = "MyCtrl"> - you have spaces in between.

Secondly, you're not declaring your app with ng-app. This is because you set your fiddle as jquery, and not Angular. If you had set it as angular you wouldn't need this in the fiddle

This is your fiddle setup

This is your fiddle setup

This is an Angular fiddle setup

This is an Angular fiddle setup

Thirdly, to use select with AngularJS, you need to have an ng-model on the select tag. In this case i just used bob

<div ng-app="HelloApp"> <!-- declare your angular app. typically would go on body or html -->
    <div ng-controller="MyCtrl"> 
        <p>Term</p>
                    <select ng-model="bob" ng-change="test()">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                    </select>       
    </div>
</div>



var app = angular.module('HelloApp', []);  
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
console.log('ctrl working');
    $scope.test = function () {
     alert ("changed!");   
    }    
}]);

Here is a working fiddle http://jsfiddle.net/ctbLparv/

Also, if your intention is to just set a property based on the selection, you don't need to use ng-change. You can rely on the two-way binding.

So for example, this fiddle: http://jsfiddle.net/ps8jnyL8/

No select is being called. We also default the selected term to 10 when it first loads.

<div ng-app="HelloApp">
    <div ng-controller="MyCtrl"> 
    <p>Term</p>
        <select ng-init="selectedTerm = '10'" ng-model="selectedTerm">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
        </select>   
        <p>Selected Term: {{selectedTerm}}</p>    
    </div>
</div>

Upvotes: 4

lintmouse
lintmouse

Reputation: 5119

Here is the working JSFiddle:

https://jsfiddle.net/G8S32/1162/

The main change was adding this line:

ng-model="items"

which doesn't do anything except update the model and cause the event to fire.

Check out the documentation for ng-change:

https://docs.angularjs.org/api/ng/directive/ngChange

Particularly this line:

The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.

Upvotes: 3

Related Questions