Fire ng-change event for textbox other than keypress or keydown

Question

I want to update a text value when the value is changed by using some method, the method should not call when I am still typing text but when exit from the textbox or change it through script code:

<input type="text" ng-model ="model.value" ng-change = "update()"/>

what should contain update() method,

what I tried is : wrote a directive for this textbox, and

scope.$watch('model', function(nval,oval){
   if ((oVal === undefined) && (nVal != undefined)){
     update()
   }
});

It is calling for the first time, but not whenever the model value changed.

I want to call update method whenever the model.value changed, but not while entering text

you can try using `$scope.$apply()` after update. – atinder Jul 27 '15 at 08:15 — atinder, Jul 27 '15 at 08:15

score 3 · Answer 1 · answered Jul 27 '15 at 08:15

You can use ng-blur and you should change your $watch:

JSFiddle

HTML:

<div ng-app="myApp" ng-controller="dummy">
    <input type="text" ng-model="model.value" ng-blur="update()"/>
</div>

JS:

angular.module('myApp', [])
    .controller('dummy', ['$scope', function ($scope) {
    $scope.model = {
        value: 'hello'
    };
    $scope.update = function () {
        console.log("changed!");
    };
    $scope.$watch('model.value', function (nval, oval) {
        if (oval !== nval) {
            $scope.update();
        }
    });
}]);

even model.value will be changed from other methods too, that is the case i am missing, update should not call when focus is on textbox — satish kumar V, Jul 27 '15 at 08:18

score 2 · Accepted Answer · edited Jul 27 '15 at 12:35

2

You can use data-ng-model-options directly to achieve your requirement. Like,

here you can get full reference of data-ng-nmodel-options https://docs.angularjs.org/api/ng/directive/ngModelOptions

this directive will work for the versions angular 1.4.x ( from 1.4.x version it suppports)

edited Jul 27 '15 at 12:35

satish kumar V

1,695
6
33
47

answered Jul 27 '15 at 10:58

Thuladhar kalwa

160
6

Fire ng-change event for textbox other than keypress or keydown

2 Answers2