MSMC2 MSMC2 - 5 months ago 35
AngularJS Question

Onchange in select dropdown not working

hope you fine and well,

i have the following form:

<form class="form-horizontal alert alert-warning" name="testForm" id="testForm" ng-submit="fun2();" hidden>
<h3 class="text-center">New Person</h3>
<select class="form-control" id="selPer" onchange="fun2()" >
<option ng-repeat="c in persons" value="{{c.per_id}}">{{c.per_name}}</option>
<div class="form-group">
<button class="btn btn-warning" ng-disabled="testForm.$invalid">Add Person</button>

the form mainly contains select dropdown and a submit button, and i have this function in the controller:

myApp.controller("personCtrl",['$scope','$http','myService', function($scope,$http,myService){


the drop down works well, but the function not work when i change the selection from the drop down menu, but when i click the submit button the function work ! so its work with the button and not working with onchange event, note: when i put the function outside the controller it works with onchange !

what is the problem ?!



Change the onchange attribute to ng-change. You can't access a function in your controller from a regular HTML event. Angular is expecting you to use an Angularized event (ng-change).

That's why the function runs when you submit the form. You're using ng-submit which lets Angular access the function in your Angular controller.