AngularJS ngChange trigger onblur

Question

for ng-Change, is there way to trigger it only when on blur? Similar to jquery on('change')?

I am seeking for a pure angular way of doing this.

Solution 1

Starting with release 1.2.0rc1 there is an ng-blur directive

jsfiddle: http://jsfiddle.net/9mvt8/6/

HTML:

<div ng-controller="MyCtrl">
    <input type='text' ng-blur='blurCount = blurCount + 1'/>

    <input type='text' ng-blur='blurCount = blurCount + 1' />

    blur count: {{blurCount}}
</div>

Script:

function MyCtrl($scope) {
    $scope.blurCount = 0;
    $scope.name = 'Superhero';
}

Solution 2

Use ng-model-options

$scope.onchange = function () {}

<input type="text" ng-model="x" ng-change="onchange()" ng-model-options="{updateOn: 'blur'}"/>

Comments

[9blue]

this is not exactly what I want, if I didnt change the value but lose focus of that field, it will still trigger the function

[DusanV]

You would handle that yourself in the blur handler. If the value changes do what you need to, otherwise do nothing.

[Niels Steenbeek]

This official one will prevent the need to handle the change logic inside the blur handler: <input type="text" ng-model="x" ng-change="onchange()" ng-model-options={updateOn: 'blur'}"/>

[John Rix]

That is a much more elegant solution. It only works in v1.3 though (which is still in beta).

[dman]

ng-dirty is used for the whole form rather than just a input box.

[Mubashar Shahzad]

Really saved time and this should be the correct answer.