7

HTML入力コントロールのセットはtestVarにバインドされています。

<div ng-app>
    <div ng-controller="TestCtrl">
        <input type="text" ng-model="testVar">
        <input type="number" min="1" max="10" ng-model="testVar">
        <input type="range" min="1" max="10" ng-model="testVar">
        <button ng-click="testVar = 5">set to 5</button>              
    </div>
 </div>

最初はすべての入力コントロールが期待どおりにこの値を表示しますが、type="range"またはtype="text"入力を介してtestVarが変更されると、type="number"入力は空白になります。testVarの値をプログラムで設定すると、期待される動作が得られます。すべての入力に更新された値が表示されます。

この問題は、次の単純なケースで示されています：http: //jsfiddle.net/7cbYp/

なぜこれが起こっているのですか、そしてどのように修正できますか？

4

2 に答える 2

3

簡単な修正は、ディレクティブを作成し、モデルと HTML アイテム自体の変更を監視することです。

HTML

<input type="number" min="1" max="10" fix="testVar">

JS

var App = angular.module('App', []);
App.directive('fix', function(){
    return{
        link: function(scope, elem, attrs){
            scope.$watch(attrs.fix, function(v){
                if(typeof v === 'string') v = parseInt(v, 10);
                elem.val(v);
            });
            elem.bind('change', function(){ 
                scope[attrs.fix] = elem.val(); 
                scope.$digest();
            });
        }
    };
});

Chromeでのみテストしましたが、動作します。

jsfiddle: http://jsfiddle.net/jaimem/HLnqt/3/

注: これを行うには、よりクリーンな方法が必要です。

于 2012-10-25T22:10:51.257 に答える
0

input[type=range] はモデルのデータ型を string に変換しますが、これは input[type=number] では表示できません。

ここでの解決策と同様の問題。

Angular データ バインディング - 入力 type="number"

于 2014-04-09T14:54:13.663 に答える