$ scope.slider - 未更新

我有一個jquery-ui滑塊，它使用滑塊的值更新文本框。

該文本框具有ng模型，所以我可以從控制器獲取值 - 但移動滑塊後該值不會更新（該值在文本框內直觀地更改，但$ 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滑塊，這就是爲什麼值爲負）

來源

2013-03-02 Doron Goldberg

你的代碼在哪裏？有人猜測你是如何管理滑塊更新的，以及它如何與角度集成......可能需要觸發輸入 – charlietfl 2013-03-02 20:32:14

這將是更好地把你的滑塊代碼放到一個角度指令，以便您可以訪問的控制範圍。

但是，如果你觸發了input elementinput event將更新的角度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()); 
    }); 
})

DEMO：http://jsfiddle.net/zwHQs/

來源

2013-03-02 22:06:33 charlietfl

+1上觸發器（'輸入'）想法的變化事件。 – 2013-03-02 22:16:23

@MarkRajcok比試圖教導如何構建指令和訪問範圍更容易 – charlietfl 2013-03-02 22:17:05

試試這個：

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

}

上述假設你展示的代碼是裏面/包裹在指令中。

來源

2013-03-02 22:10:01

$ scope.slider - 未更新

回答

相關問題