使用离子范围设置月份和年份

Posted 2023-03-05

【中文标题】使用离子范围设置月份和年份

【英文标题】：using ionic range to set months and years

【发布时间】：2015-01-01 05:36:00

【问题描述】：

我在我的 html 页面中使用离子范围来设置月数。看起来像这样

当我滑动离子范围时，我希望它显示为年和月。 例如：第一个月最多 12 个月并自动变为一年。我怎样才能实现这一点？

我的离子范围的 html 代码

<p><label class="labelCalhead">  Select your Loan Term :</label></p>
            <div class="item range">
                <input type="range" name="volume" min="1" max="30"  ng-model="loanTerm" ></div>
            <label class="labelCal">Monthly</label>
            <p><input type="text" decimal-places ng-model="loanTerm" onkeypress='return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46' min="0" max="30" STYLE="color: #72A4D2; " /></p><br>

准确地说，我想做这样的事情

【问题讨论】：

你能做jsfiddle.net吗？

制作一个 jsfiddle 并不多

【参考方案1】：

我会给你最简单的代码来告诉你怎么做，然后你可以像上面的 UI 一样添加文本框。

在控制器中定义以下函数并初始化滑块的初始值

$scope.drag = function(value) 
    $scope.years = Math.floor(value / 12);
    $scope.months = value % 12;
;

$scope.rangeValue = 0;

然后在你的模板中

<input type="range" name="volume" min="0" max="100" ng-model="rangeValue" ng-change="drag(rangeValue)">
<div>Total: rangeValue  Years: years  Months: months</div>

现在，当您拖动范围输入时，它会显示年份和月份。