JQuery UI滑块' slide'功能未设置angularJS值

时间:2016-08-26 18:16:34

标签: javascript jquery angularjs jquery-ui jquery-ui-slider

我试图通过捕捉Slide函数中的值并将其设置为AngularJS $scope变量来显示其下方的滑块值,但它不起作用。

这是我的JS代码段:

$( "#price-slider" ).slider({
    range: true,
    min: 0,
    max: 1000000,
    values: [ 10000,  500000],
    slide: function( event, ui ) {
        $scope.price_gt = ui.values[0];
        $scope.price_lt = ui.values[1];
    }
});

HTML:

<div id="price-slider"></div>
<p style="text-align: center">&#8377; {{price_gt}} - &#8377; {{price_lt}}</p>

有人可以帮我理解我出错的地方吗?我基本上需要在用户移动幻灯片并显示它时动态获取值。

2 个答案:

答案 0 :(得分:2)

试试这个

<input type="text" id="price_gt" size="auto" readonly style="border:0; color:black; font-weight:bold;  width:100% " /> 

答案 1 :(得分:0)

原来问题在于AngularJs而不是JQuery Slider。

进行此更改解决了我的问题:

slide : function(event, ui) {
            $scope.$apply(function() {
                $scope.price = {
                        lower_limit : ui.values[0],
                        upper_limit : ui.values[1]
                };
            });
        }