web-dev-qa-db-ja.com

Angular ng-change古い入力テキストボックスでの変更

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

何らかの理由で、ng-change textboxで機能していないので使用しています。 Angular-uiのui-events。

問題

値が変更されるおよびコールバックの古い値も必要。（oldValueをサーバーに送信するため）の場合にのみ、関数を呼び出します。

これらの非常に多くの出現があるので、私は純粋なディレクティブルートを介して行きたくない

NG-CHANGE：変更された各文字でコールバックを取得します。私はそれを望んでいません。テキストボックスに古い値を指定し、ぼかし後に新しい値を指定して、サーバースクリプトを呼び出す必要があります。

angularjstextboxangularjs-ng-change
12
shrw

変数を監視して、newValueとoldValueを同時に持つことができます。

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

あなたのコントローラーで：

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

JSFiddle

[〜＃〜] edit [〜＃〜]あなたは編集で新しい要件に言及したので、答えを編集します。 ng-changeを使用しないでください。コントロールがフォーカスされているときにoldValueを取得し、変数に保存してから、blurイベントで新しい値を取得する必要があります。 新しいフィドルを設定しました。

コントローラーで：

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

私はあなたの意見

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

Ng-model-optionsを使用する

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

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

Angular ngModelOptions with getterSetter：true;を使用し、関数の「set」部分内でメソッド呼び出しを使用します。

このページの最後の例を参照してください： https://docs.angularjs.org/api/ng/directive/ngModelOptions

0
Max