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

【问题标题】：using ionic range to set months and years使用离子范围设置月份和年份
【发布时间】：2023-04-04 02:52:01
【问题描述】：

我在我的 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 并不多

标签： javascript html angularjs ionic-framework

【解决方案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>

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

【讨论】：