CODEWITHSUNDEEP
angularjsmaterial-designangularjs-select
Snopzer
Snopzer

Reputation: 1692

ng-change function Calling on-load before selecting

Calling ng-change="changeStudentStatus();" function on-load, before selecting options.

<md-select ng-model="ctrl.newStudentStatus" ng-change="changeStudentStatus();" ng-if="ctrl.studentStatusList" >
   <md-option class="ss-options" ng-value="item.display_name" ng-repeat="item in ctrl.studentStatusList" ng-selected="item.id == ctrl.statusId">{{item.display_name}}</md-option>
</md-select>

Script :

$scope.changeStudentStatus = function(){
     //some logic  
};

it should Call when use change the DropDown. whats wrong in my script

Upvotes: 4

Views: 3434

Answers (4)

Leffa
Leffa

Reputation: 494

I solved by doing this:

    $scope.changeStudentStatus = function(){
          if($scope.ctrl.newStudentStatus)
          {
            //some logic  
          }
    };

Upvotes: 0

Snopzer
Snopzer

Reputation: 1692

Its calling the changeStudentStatus() eveytime the page loading before select the options.

<md-select ng-model="ctrl.newStudentStatus" ng-change="changeStudentStatus();" ng-if="ctrl.studentStatusList" >
   <md-option class="ss-options" ng-value="item.display_name" ng-repeat="item in ctrl.studentStatusList" ng-selected="item.id == ctrl.statusId">{{item.display_name}}</md-option>
</md-select>

i just resolved the issue with temporary solution, i have to call changeStudentStatus only when user changed the values, so i am creating a temporary variable and storing the earlier value, can performing the logic only when values is changed.

Script:

$scope.newValue  =ctrl .newStudentStatus;
        $scope.changeStudentStatus = function(){
              if($scope.oldVlaue === $scope.newValue)
              {
                //some logic  
              }
        };

Upvotes: 1

ravikumar533
ravikumar533

Reputation: 24

The ng-change expression will be automatically evaluated when you use the method ngModelCtrl.$setViewValue.

angular.module("myApp").directive("mdselect", function(){  return {
require:"^ngModel", // this is important, 
scope:{      ... // put the variables you need here but DO NOT have a variable named ngModel or ngChange 
}, 
link: function(scope, elt, attrs, ctrl){ // ctrl here is the ngModelCtrl
  scope.setValue = function(value){
    ctrl.$setViewValue(value); // this line will automatically eval your ng-change
  };
}};});

Upvotes: -3

Donniewiko
Donniewiko

Reputation: 1683

Change

ng-change="changeStudentStatus();"

to

ng-change="ctrl.changeStudentStatus();"

The difference is that in your code, you call a method that is called changeStudentStatus(). This method isn't available on the controller.

I assumed that you alliased your controller as ctrl since your other methods/properties are being called with ctrl.*

When you call the method ctrl.changeStudentStatus() you actually call the method that is set on your controller.

Upvotes: -3

Related Questions