angularjs - example - Angular ng-change en el cuadro de texto de entrada con el viejo valor

ng-change select

Question

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

Por alguna razón, el ng-change el cuadro de texto no funciona, así que lo estoy usando; Usando ui-events Angular-ui.

PROBLEMA

Quiero llamar a la función solo si se cambia el valor y también quiero el valor anterior en la devolución de llamada (ya que deseo enviar el valor anterior al servidor).

No quiero ir por la ruta de directivas puras porque hay tantas ocurrencias de estos

NG-CHANGE: en cada personaje cambiado recibo una devolución de llamada. No quiero eso. Necesito llamar al script del servidor ... con el valor anterior en el cuadro de texto y el nuevo valor después del desenfoque.

Answer 1

Puedes usar 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);

DEMO Plunkr

Answer 2

Puede ver su variable para tener el newValue y oldValue al mismo tiempo.

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

En tu controler:

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

JSFiddle

EDITAR Has mencionado un nuevo requisito en tu edición, así que edito mi respuesta. No deberías usar ng-change. Debería obtener el OldValue cuando se enfoca el control y guardarlo en una variable y luego obtener el nuevo valor en el evento blur. Configuré un nuevo violín.

En tu controlador:

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

Yo tu vista

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

Answer 3

Use Angular ngModelOptions con getterSetter: true; y luego usa la llamada al método dentro de la parte "establecer" de la función.

Vea el último ejemplo en esta página: https://docs.angularjs.org/api/ng/directive/ngModelOptions

Answer 4

Use ng-model-options

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