13

通常、ng-model は、ユーザーがキーを押すたびにバインドされたモデルを更新します。

<input type="text" ng-model="entity.value" />

これは、ほとんどすべての場合にうまく機能します。

しかし、onkeyup/onkeydown イベントの代わりに onchange イベントが発生したときに更新する必要があります。

古いバージョンの angular には、現在 ng-model と同じように機能する ng-model-instant ディレクティブがありました (少なくともユーザーにとっては、実装については何も知りません)。したがって、古いバージョンでは、ng-model を指定しただけでモデル onchange が更新され、ng-model-instant を指定するとモデル onkeypup が更新されました。

ここで、要素の「変更」イベントで使用する ng-model が必要です。私はそれがインスタントであってほしくない。これを行う最も簡単な方法は何ですか？

編集

入力はモデルへのその他の変更を反映する必要があります。モデルが他の場所で更新される場合、入力の値はこの変更を反映する必要があります。

私が必要としているのは、ng-model ディレクティブが古いバージョンの angularjs で機能していたのと同じように機能することです。

これが私がやろうとしていることの説明です: http://jsfiddle.net/selbh/EPNRd/

4

4 に答える 4

20

ここで onChange ディレクティブを作成しました。デモ: http://jsfiddle.net/sunnycpp/TZnj2/52/

app.directive('onChange', function() {    
    return {
        restrict: 'A',
        scope:{'onChange':'=' },
        link: function(scope, elm, attrs) {
            scope.$watch('onChange', function(nVal) { elm.val(nVal); });            
            elm.bind('blur', function() {
                var currentValue = elm.val();
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.onChange = currentValue;
                    });
                }
            });
        }
    };        
});
于 2013-01-23T11:24:29.400 に答える
4

AngularJS ngChange ディレクティブも参照してください。

<input> に適用すると、キーを押すたびに変化が発生し、blur イベントでは発生しません。

http://docs.angularjs.org/api/ng.directive:ngChange

于 2013-03-07T16:17:47.567 に答える
2

Angularjs: input[text] ngChange fires while the value is changing : この回答は、カスタム ディレクティブを使用できるようにするはるかに優れたソリューションを提供するngModelため、ngModel.

また、使用するイベント (blur だけでなく) やその他のプロパティを指定できる、さらに柔軟なソリューションをすぐに angular に組み込む必要があります: https://github.com/angular/angular.js/pull/2129

于 2014-02-24T20:33:49.907 に答える
1

これを行うためのより良い方法があるかどうかはわかりませんが、カスタム ディレクティブを使用してこれを実現できます (任意の jquery イベントで)

<input type="text" ng-model="foo" custom-event="bar" />
<p> {{ bar }} </p>

// create the custom directive

app.directive('customEvent', function() {
    return function(scope, element, attrs) {
        var dest = attrs.customEvent;

        $(element[0]).on('any-jquery-event', function(e) {
            e.preventDefault();

            // on the event, copy the contents of model
            // to the destination variable
            scope[dest] = scope.foo;

            if (!scope.$$phase)
                scope.$apply();
        });
    }
});
于 2013-01-23T11:10:48.333 に答える