从输入类型=范围中获取值

Posted 2023-05-09

【中文标题】从输入类型=范围中获取值

【英文标题】：Fetching values from input type=range

【发布时间】：2017-04-13 12:08:07

【问题描述】：

我有一个带有from 和to 年龄的年龄范围滑块。我需要将选择的值传递给 ng-model，但我的 ng-model 没有读取该值。由于我创建的滑块是使用 jQueryUi 的。

我需要将在 ng-model 中选择的值作为 5-6 传递。我尝试将值从我的 jQuery 脚本传递给 ng-model，它没有更新。

需要帮助。

html：

<label for="age">Age:</label>
<input type="text" id="age" ng-model="model.ageRange" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>

JS：

$( function() 
    $( "#slider-range" ).slider(
        range: true,
        min: 0,
        max: 100,
        /*values: [ 0, 100 ],*/
        slide: function( event, ui ) 
            $( "#age" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        
    );
    $( "#age" ).val( "" + $( "#slider-range" ).slider( "values", 0 ) +
        " - " + $( "#slider-range" ).slider( "values", 1 ) );
);

【问题讨论】：

jQuery ui 小部件具有与 angularjs 的适当集成，请查看htmlpreview.github.io/?https://github.com/angular-ui/ui-slider/…

【参考方案1】：

如果您从 Angular 框架之外更新任何 Angular 内容，Angular 将无法识别这些更改。因此，要更新您的 ng-model，您需要在 Angular 提供的 $scope.$apply() 函数中修改您的年龄范围值.有关更多信息，请参阅角度文档。