Angularjs: input [text] ngChange aktif saat nilainya berubah

ngChange diaktifkan saat nilainya berubah (ngChange tidak sama dengan acara onChange klasik). Bagaimana cara mengikat acara onChange klasik dengan angularjs, yang hanya akan aktif ketika konten dikomit?

Pengikatan saat ini:

<input type="text" ng-model="name" ng-change="update()" />

Posting ini menunjukkan contoh arahan yang menunda perubahan model ke input sampai peristiwa blur diaktifkan.

Berikut ini biola yang menunjukkan ng-change bekerja dengan direktif ng-model-on-blur yang baru. Perhatikan bahwa ini adalah sedikit perubahan pada biola aslinya .

Jika Anda menambahkan arahan ke kode Anda, Anda akan mengubah pengikatan Anda ke ini:

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

Berikut arahannya:

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

Catatan: seperti yang @wjin sebutkan di komentar di bawah, fitur ini didukung langsung di Angular 1.3 (saat ini dalam versi beta) melalui ngModelOptions. Lihat dokumen untuk info lebih lanjut.

Ini tentang tambahan terbaru untuk AngularJS, untuk dijadikan jawaban di masa mendatang (juga untuk pertanyaan lain ).

Versi Angular yang lebih baru (sekarang dalam 1,3 beta), AngularJS secara native mendukung opsi ini, menggunakan ngModelOptions, like

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

Dokumentasi NgModelOptions

Contoh:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Jika ada orang lain yang mencari dukungan tombol "masuk" tambahan, berikut ini pembaruan untuk biola yang disediakan oleh Gloppy

Kode untuk mengikat tombol:

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

Untuk siapa pun yang berjuang dengan IE8 (tidak suka pelepasan ('input'), saya menemukan cara untuk mengatasinya.

Masukkan $ sniffer ke dalam direktif Anda dan gunakan:

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

IE8 akan tenang jika Anda melakukan ini :)

Menurut pengetahuan saya, kita harus menggunakan ng-change dengan opsi pilih dan dalam kasus kotak teks kita harus menggunakan ng-blur.

Bukankah menggunakan $ scope. $ Watch untuk mencerminkan perubahan variabel scope dengan lebih baik?

Timpa perilaku onChange input default (panggil fungsi hanya jika fokus dan nilai control loss berubah)

CATATAN: ngChange tidak mirip dengan acara onChange klasik, ngChange mengaktifkan peristiwa saat nilainya berubah Direktif ini menyimpan nilai elemen saat fokusnya
Diaburkan, ia memeriksa apakah nilai baru telah berubah dan jika demikian ia mengaktifkan peristiwa tersebut

@param {String} - nama fungsi yang akan dipanggil saat "onChange" harus diaktifkan

@example <masukan my-on-change = "myFunc" ng-model = "model">

angular.module('app', []).directive('myOnChange', function () { 
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});

Saya memiliki masalah yang persis sama dan ini berhasil untuk saya. Tambahkan ng-model-updatedan ng-keyupAnda siap melakukannya! Ini dokumentasinya

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />