1

次のような入力がいくつかあります。

<input type='range' min='15' max='{{plan.retirementAge - 1}}' name='age' ng-model='plan.age' />
<input type='range' min='{{plan.age + 1}}' max='90' name='retirementAge' ng model='plan.retirementAge' />

これはページが最初に読み込まれたときに正しく機能しますが、いずれかの値を変更すると、もう一方の値はバインディングを文字列として扱い、38 ではなく "37" + 1 = "371" に変更します。 ?

4

1 に答える 1

1

これはおそらく、Angular がなどのtype="range"ようなハンドラーをまだ実装していないためtype="number"です。おそらく、Github サイト (Issues の下) でこれを報告する必要があります。

その間、このように回避できます。つまり、独自のものを作成し、値を数値に変換range-modelするパーサーを追加します。ngModelController

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.age = 10;
        $scope.retirementAge = 65;
    })
    .directive('rangeModel', function() {
        return {
            require: 'ngModel',
            link: function($scope, elem, attrs, ctrl) {
                ctrl.$parsers.push(function(val) {
                    return parseInt(val, 10);
                });
            }
        };
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <input type='range' min='15' max='{{retirementAge - 1}}' range-model name='age' ng-model='age' />
    {{age}}
    <input type='range' min='{{age + 1}}' max='90' name='retirementAge' range-model ng-model='retirementAge' />
    {{retirementAge}}
</body>
</html>
于 2013-02-28T05:46:33.370 に答える