使用离子范围来设定数月和数年

Question

我在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>

要精确，我想做这样的事情

Answer 1

我将为您提供最简单的代码，告诉您如何操作，然后您可以在上面的用户界面中添加文本框。

在控制器中定义以下功能，并初始化滑块的初始值

$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>

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