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

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

我将为您提供最简单的代码,告诉您如何操作,然后您可以在上面的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>

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