Angular ng-change in input textbox with old value

Question

<input type="text" id="exampleab"
ng-model="a.b"
ui-event="{ blur : 'callScriptThenServer()' }" >

For some reasons the ng-change on textbox is not working so i am using it; Using Angular-ui's ui-events.

PROBLEM

I want to call the function only if the value is changed and also want the old value in callback.(since I want to send the oldValue to the server).

I don't want to go via pure directives route because there are so many occurrences of these

NG-CHANGE : on each character changed i get a callback . I don't want that. I need to call the server script .. with the old value in the text box and the new value after blur

ng-change works just fine. Check this [example] http://plnkr.co/edit/UVG8rPhBa5vrwn6UR7hr?p=preview — Zeeshan Abbas, Jan 03 '14 at 16:46
you will need to type something in the box to use that example. on change it will alert — Zeeshan Abbas, Jan 03 '14 at 16:48
on tying each character i get a callback .. I DON't WANT THAT .. i need to call the server script .. with the old value in the text box and the new value after blur — shrw, Jan 04 '14 at 04:30
ng-change was not working since i was using old version of ngularjs — shrw, Jan 04 '14 at 10:50
okay great, now you have new angularjs just use ng-blur= instead of ng-change= so that when user has finished with the input the value will be sent to the server (note in some cases users will type a character and switch to next input for that you need to implement a chekc inside your controller) — Zeeshan Abbas, Jan 04 '14 at 14:09

Alborz · Answer 1 · 2014-01-04T05:00:06.800

17

You can watch your variable to have the newValue and oldValue at the same time.

<input type="text" id="exampleab" ng-model="a.b"  >

In your controler:

app.controller('ctrl', function ($scope) {
    $scope.$watch('a.b', function (newValue, oldValue) {
        console.log('oldValue=' + oldValue);
        console.log('newValue=' + newValue);
        //do something
    });
});

JSFiddle

EDIT You mentioned a new requirement in your edit so i edit my answer. You shouldn't use ng-change. you should get the oldValue when the control being focused and save it in a variable and then get the new value on blur event. I set up a new fiddle.

In your controller :

    app.controller('ctrl', function ($scope) {
        $scope.showValues = function () {
            alert('oldValue = ' + $scope.oldValue);
            alert('newValue = ' + $scope.a.b);
        }
    });

I your view

<input type="text" id="exampleab" ng-model="a.b" ng-init="oldValue = ''" ng-focus="oldValue = a.b" ng-blur="showValues()" />{{a.b}}

edited Jan 04 '14 at 05:00

answered Jan 03 '14 at 16:45

Alborz

6,843
3
22
37

1

on tying each character i get a callback .. I DON't WANT THAT .. i need to call the server script .. with the old value in the text box and the new value after blur – shrw Jan 04 '14 at 04:31
10

@naveen23: You need to work on your writing, which sounds really rude and unthankful. – Sebastian Mach Oct 31 '14 at 16:42
@phresnel Why does he need to? When people does not read his requirements correctly... Its his waste of time... – Elisabeth Jan 13 '15 at 18:56
3

@Elisa: If a partial misunderstanding in the effort of __helping__ some _stranger_ __for free__ justifies being rude and aggressive in your world, I am glad we are not friends. You don't even realise that it's especially the __answerers__ waste of time if there's a misunderstanding, __not__ the askers. -- edit: OTOH, your opinion does no longer surprise me after seeing your 1/10 answer/ask ratio, or more specifically 1/40 with actual upvotes. This time, seemingly an indicator of non-experience in donating some free time. Are you a [parasite](http://en.wikipedia.org/wiki/Parasitism)? – Sebastian Mach Jan 14 '15 at 08:56
@Alborz Thanks a lot for such a great solution. I was playing with ng-change. Now I replaced it with ng-focus and ng-blur events. It works fine. I'm getting old and new values. Cheers!!! – Ram Aug 01 '17 at 13:35

Niels Steenbeek · Answer 2 · 2016-03-15T08:23:34.853

10

Use ng-model-options

<input type="text" ng-model="a.b" ng-change="callScriptThenServer()" ng-model-options="{updateOn: 'blur'}"/>

edited Mar 15 '16 at 08:23

answered May 16 '14 at 15:24

Niels Steenbeek

4,692
2
41
50

Satpal · Answer 3 · 2014-01-03T16:52:09.053

2

You can use AngularJS Watch

$scope.$watch(function(){
    return $scope.a.b;
}, function(newvalue, oldvalue){
    //Here You have both newvalue & oldvalue
    alert("newvalue: " + newvalue);
    alert("oldvalue: " + oldvalue);
},true);

Plunkr DEMO

edited Jan 03 '14 at 16:52

answered Jan 03 '14 at 16:44

Satpal

132,252
13
159
168

1

on tying each character i get a callback .. I DON't WANT THAT .. i need to call the server script .. with the old value in the text box and the new value after blur – shrw Jan 04 '14 at 04:29

score 0 · Answer 4 · answered Feb 20 '15 at 10:34

0

Use Angular ngModelOptions with getterSetter:true; and then use method call inside the "set" part of the function.

See the last example on this page: https://docs.angularjs.org/api/ng/directive/ngModelOptions

answered Feb 20 '15 at 10:34

Max

3,280
2
26
30

Angular ng-change in input textbox with old value

PROBLEM

4 Answers4