CODEWITHSUNDEEP
javascriptangularjs
user944513
user944513

Reputation: 12729

why ng-change not fired in angular js?

could you please tell me why ng-change not fired in angular js ? when I type "abc" in date input field it fire only one time . please tell me how I will fire multiple time here is my code

$scope.changedate =function(){
    console.log('asda')
  }

<li ng-repeat="(key, x) in c">
       <p class="input-group"  ng-if="x.date=='date'">
          <input type="text" ng-change='changedate()' class="form-control" uib-datepicker-popup="{{format}}" ng-model="x.name" is-open="x.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="formats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1(x)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
      <input id='{{key}}' ng-if="x.date!='date'"  type="text" ng-model='x.name' value="{{x.name=='abc'?'ddd':'hhh'}}"/>
    </li>

http://plnkr.co/edit/neixp9ZARRAQ33gKSV9u?p=preview tep to reproduce this error

  1. Run the application .First date field is empty .I just entered 1 inside that then ng changed fired and after that aagin i type anthing it doesn't fire

Upvotes: 0

Views: 1424

Answers (1)

Rathma
Rathma

Reputation: 1313

because when you type a, the model value become undefined, when you type b, the model value is undefined so nothing has changed, when you type c the model is again undefined. that is why ng-change is not called.

from angularjs documentation:

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

It will not be evaluated:

if the value returned from the $parsers transformation pipeline has not changed if the input has continued to be invalid since the model will stay null if the model is changed programmatically and not by a change to the input value

here is a helper directive I use for such senario:

angular.module('viewValueChanged', [])
    .directive('viewValueChanged', viewValueChangedDirective);


function viewValueChangedDirective() {
    return {
        restrict: "A",
        require: 'ngModel',
        link: linkFn
    };

    function linkFn(scope, elem, attrs, ngModel) {
        scope.$watch(function () {
            return ngModel.$viewValue;
        }, function (newValue, oldValue) {
            if (newValue && newValue !== oldValue) {
                scope.$parent.$eval(attrs['viewValueChanged']);
            }
            // in case of user entered invalid value
            if(newValue === null) {
                scope.$parent.$eval(attrs['viewValueChanged']);
            }
        });
    }
}

and use it like this:

 <input uib-datepicker-popup view-value-changed="vm.onFieldsChange() />

Upvotes: 1

Related Questions