My dropdownlist select onchange is not firing in angular js

Question

I am very much new to AngularJS and I want to get values of OnChange of dropdownlist.

Below is my code which I tried

<div>
    <select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="onSelectChange()">            
        <option value="SAP_Executive">SAP Executive</option>
        <option value="Fiber_Engineer">Fiber Engineer</option>
        <option value="Fiber_Lead">Fiber Lead</option>
        <option value="CMM">CMM</option>
    </select>
</div>

Angular code

angular.module('App', [])
 .controller('UserSelection', function () {
  var User = this;      
  User.onSelectChange = function () {
      alert('change value selected');
  };
});

My alert is not firing. Please suggest what I am missing here

Try using ng-change="User.onSelectChange()" instead of ng-change="onSelectChange()" — Sudhir Ojha
– Sudhir Ojha, Commented Jan 31, 2019 at 11:13
@SudhirOjha: what is the difference in both the attributes with their values ?? — HEEN
– HEEN, Commented Jan 31, 2019 at 11:14

Sudhir Ojha · Accepted Answer · 2019-01-31 11:38:37Z

1

Look here the following snippet. You have created an alias of your controller but not using it.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App">
    <select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="User.onSelectChange()" ng-init="User.UserSelected='--select--'">
        <option value="--select--">--select--</option>            
        <option value="SAP_Executive">SAP Executive</option>
        <option value="Fiber_Engineer">Fiber Engineer</option>
        <option value="Fiber_Lead">Fiber Lead</option>
        <option value="CMM">CMM</option>
    </select>
</div>

<script>
 angular.module('App', [])
 .controller('UserSelection', function () {
  var User = this;      
  User.onSelectChange = function () {
      alert('change value selected');
  };
});
</script>

</body>
</html>

edited Jan 31, 2019 at 11:38

answered Jan 31, 2019 at 11:18

Sudhir Ojha

3,3053 gold badges16 silver badges28 bronze badges

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

7 Comments

HEEN Over a year ago

how can I get default value "--Select--" on load ?

HEEN Over a year ago

why blank value is coming, need to remove that ?

Sudhir Ojha Over a year ago

Which value you want default selected ?

HEEN Over a year ago

I want --Select-- as default

Sudhir Ojha Over a year ago

@BN done you can use ng-selected . I have updated my answer.

|

Collectives™ on Stack Overflow

My dropdownlist select onchange is not firing in angular js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related