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

最好将滑块代码放入角度指令中，以便您可以访问控制器范围。

但是，如果您触发它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 回答