web-dev-qa-db-fra.com

Changement angulaire dans la zone de saisie avec l'ancienne valeur

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

Pour certaines raisons, le ng-change sur la zone de texte ne fonctionne pas, je l'utilise donc; Utiliser le ui-events de Angular-ui.

PROBLÈME

Je souhaite appeler la fonction uniquement si la valeur est modifiée et souhaite également conserver l'ancienne valeur dans callback .

Je ne veux pas passer par les directives pures car il y a tellement d'occurrences de celles-ci

NG-CHANGE: sur chaque caractère changé, je reçois un rappel. Je ne veux pas ça. J'ai besoin d'appeler le script de serveur .. avec l'ancienne valeur dans la zone de texte et la nouvelle valeur après le flou 

angularjstextboxangularjs-ng-change
12
andNn

Vous pouvez regarder votre variable pour avoir newValue et oldValue en même temps.

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

Dans votre contrôleur:

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

JSFiddle

EDIT Vous avez mentionné une nouvelle exigence dans votre modification afin que je modifie ma réponse . Vous ne devriez pas utiliser ng-change. vous devez obtenir la valeur oldValue lorsque le contrôle est activé et l'enregistrer dans une variable, puis obtenir la nouvelle valeur lors d'un événement de flou . j'ai créé un nouveau violon.

Dans votre contrôleur:

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

Je votre vue

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

Utiliser ng-model-options

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

Vous pouvez utiliser 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

2
Satpal

Utilisez Angular ngModelOptions avec getterSetter: true; puis utilisez appel de méthode dans la partie "set" de la fonction.

Voir le dernier exemple sur cette page: https://docs.angularjs.org/api/ng/directive/ngModelOptions

0
Max Wikstrom