2

スライダーの値でテキストボックスを更新する jquery-ui スライダーがあります。

テキストボックスには ng-model があるため、コントローラーから値を取得できますが、スライダーを移動しても値は更新されません (値はテキストボックス内で視覚的に変化しますが、$scope.slider は同じままです)。

テキストボックス内の値を手動で変更すると、すべてが期待どおりに機能し、 $scope.slider の値が新しい値で更新されます。

スライダーにスコープの値も更新させる方法はありますか?

   <input type="text" id="rent"  ng-model="rent" style="border: 0; color: #f6931f; font-weight: bold;" />
  <div id="slider-rent" style="width: 80%;"></div>

  $("#slider-rent").slider({
        range: false,
        min: 0,
        max: 20000,
        step: 10,
        value: 0,
        slide: function (event, ui) {
            $("#rent").val(ui.value);
        }
    });
    $("#rent").val($("#slider-rent").slider("value"));
    $("#rent").change(function () {

        $("#slider-rent").slider("value", $("#rent").val());
    });

(これは rtl スライダーです。これが値が負の理由です)

4

2 に答える 2

3

コントローラー スコープにアクセスできるように、スライダー コードを angular ディレクティブに配置することをお勧めします。

ただし、でトリガーinput eventするinput elementと、角度が更新されますmodel

function updateInputValue( newVal){
     $("#rent").val(newVal).trigger('input');    
}

$(function () {
    $("#slider-rent").slider({
        range: false,
        min: 0,
        max: 20000,
        step: 10,
        value: 0,
        slide: function (event, ui) {
            updateInputValue(ui.value);
        }
    });
    updateInputValue($("#slider-rent").slider("value"));
    $("#rent").change(function () {
        $("#slider-rent").slider("value", $("#rent").val());
    });
})

デモ: http://jsfiddle.net/zwHQs/

于 2013-03-02T22:06:33.960 に答える
0

これを試して：

slide: function (event, ui) {
    $scope.rent = ui.value;

}

上記は、表示するコードがディレクティブ内/ラップされていることを前提としています。

于 2013-03-02T22:10:01.703 に答える