8

AngularJS を使用して数値をバインドする際に問題が発生しています。

JSFiddle に簡単な例を載せました: http://jsfiddle.net/treerock/ZvdXp/

<div ng-controller="MyCont" ng-app>  
    <input type="number" min="0" max="50" value="{{value}}" ng-model="value" />    
    <input type="text" value="{{value}}" ng-model="value" />
    <input type="range" min="0" max="50" value="{{value}}" ng-model="value" />    
    {{value}}   
</div>

これは 3 つの異なるタイプの入力フィールドである必要があり、1 つを更新するとすべての値が更新されます。数値入力以外は機能しています。たとえば、最初の数値ボックスに 20 と入力すると、他のすべての値のインスタンスが更新されます。しかし、テキストまたは範囲の入力を更新すると、数値の入力が空白になります。

フィールド間で数値がどのように表現/変換されるかに問題があるかどうか疑問に思っていました。たとえば、数値入力は浮動小数点数で、テキスト入力は文字列ですか?

4

5 に答える 5

11

そうです、文字列と数値型に関係しています。私は$scope.watchそれを修正するためにステートメントを使用しました: http://jsfiddle.net/ZvdXp/6/

于 2013-10-16T13:49:26.563 に答える
5

これをディレクティブで修正することもできます。数値フィールドにバインドされた入力を強制的に数値にするディレクティブを作成しました。

HTML:

myApp.directive('numericbinding', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                model: '=ngModel',
            },                
           link: function (scope, element, attrs, ngModelCtrl) {
               if (scope.model && typeof scope.model == 'string') {
                   scope.model = parseInt(scope.model);
               }                  
            }
        };
});

次のように数値フィールドに追加できます。

<input data-ng-model="stringnumber" numericbinding type="number"/>

完全な例: http://jsfiddle.net/tdjager/cMYQ3/1/

于 2013-12-12T09:15:45.907 に答える
4

モデルに数値を保存する場合は、次のように、テキスト入力と範囲入力によって生成された文字列を角度パーサーを介して数値に変換するディレクティブを使用できます。

myApp.directive('numericsaving', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
            model: '=ngModel'
        },
        link: function (scope, element, attrs, ngModelCtrl) {
            if (!ngModelCtrl) {
                return;
            }
            ngModelCtrl.$parsers.push(function (value) {
                if (!value || value==='' || isNaN(parseInt(value)) || parseInt(value)!==value) {
                    value=0;
                }
                return parseInt(value);
            });
        }
    };
});

HTML では、数字の入力をそのままにして、他の入力にディレクティブを次のように追加します。

<input type="number" min="0" max="50" value="{{value}}" ng-model="value" />
<input type="range" min="0" max="50" value="{{value}}" ng-model="value" numericsaving/>
<input type="text" value="{{value}}" ng-model="value" numericsaving/>

角度パーサーは、モデルに保存する前に文字列入力を数値に変換するため、数値入力は自動的に機能します。 ここに完全なフィドルがあります。

さらに、ユーザーがテキスト入力に文字や奇妙な文字を挿入した場合、それらはモデルに保存されず、アプリケーションの唯一の信頼できるソースで無効な値が防止されます。テキストの先頭にある「+」および「-」文字のみが正しく解析されるため、負の値も許可されます。これが役立つことを願っています！:)

于 2015-02-05T18:43:46.857 に答える