2

値を直接入力するための入力フィールドを持つ範囲スライダーを作成したい (jQM のように: http://demos.jquerymobile.com/1.4.4/slider/ )。

私のディレクティブは次のようになります。

app.directive("mySlider", [function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            id: "@?",
            min: "@",
            max: "@",
            step: "@?",
            value: "=ngModel"
        },
        template: "" +
            "<div class='my-sliderWrap'>" +
                "<input type='number' min={{min}} max={{max}} step={{step}} value={{value}} ng-model=value>" +
                "<input type='range' min={{min}} max={{max}} step={{step}} value={{value}} ng-model=value>" +
            "</div>",
        link: function ($scope, $element, $attrs) {

            //some logic here
        }
    }
}]);

これは、数値入力の値を変更するときにうまく機能します。スライダーが移動し、両方の値属性が更新されます。スライダーを直接動かすとすぐに、両方の値属性が更新されますが、数値入力のテキストが何らかの理由でクリアされ、最小値に設定されます。

テンプレート内またはデータ バインディングで間違いを犯しましたか?

4

1 に答える 1

2

同じ問題に関するこの回答によると、解決しました：

https://stackoverflow.com/a/24808152/2577116

概要: HTML5 の範囲入力が数値ではなく文字列を返すようです。この文字列を数値入力に割り当てると、同じものがクリアされます。誰がそれを考えるでしょうか、数値が必要になるでしょう...

解決策として、返された文字列値を数値に変換するだけです。たとえば、 parseFloat() で行います。

$scope.$watch('value',function(newValue) {
  $scope.value = parseFloat(newValue); //or Number(newValue); or parseInt(newValue);
});

このロジックは、リンク関数に挿入するだけです。終わり。

あまり良くありませんが、簡単な回避策です。

于 2014-09-26T08:59:09.980 に答える