12

ng-repeatフォーム要素をカスタムオブジェクトのプロパティにバインドするために使用しています。例:

 $scope.myObject = {
            'font-size': 10,
            'text-outline-width': 2,
            'border-color': 'black',
            'border-width': 3,
            'background-color': 'white',
            'color': '#fff'
    }

HTML:

<div ng-repeat='(key, prop) in myObject'>
    <p>{{key}} : {{prop}}</p>
    <input type='text' ng-model='myObject[key]'>
</div>

ただし、入力ボックスに値を入力しようとするたびに、テキスト ボックスの選択が解除され、入力を続けるには再度選択する必要があります。

自由に入力できるように、このオブジェクトへの双方向バインディングを行う別の方法はありますか?

JSFiddle は次のとおりです: http://jsfiddle.net/AQCdv/1/

4

2 に答える 2

0

これはディレクティブで解決できます。というディレクティブを作成しましたcustomBlurが、HTML で一致する場合は、好きなように呼び出すことができます。ここでフィドルを表示します: http://jsfiddle.net/AQCdv/3/

angular.module('app', []).directive('customBlur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return; //ignore check boxes and radio buttons

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

そして、HTMLディレクティブは次のように使用されます

<input type='text' ng-model='myObject[key] ' custom-blur>

このディレクティブが行うことは、テキスト フィールドがフォーカスを失う原因となっているモデルの更新を生成するイベントのバインドを解除することです。テキスト フィールドがフォーカスを失うと (blur イベント)、モデルが更新されます。

于 2013-10-15T23:51:32.303 に答える