使用离子范围来设定月份和年份 [英] using ionic range to set months and years

问题描述

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

我希望这可以显示为年份和月份，当我滑动离子范围。
例如：第一个月升至12，并自动变为一年。如何实现这一目标？

离子范围的html代码

 < p>< label class =labelCalhead>选择您的贷款条款：< / label>< / p> 
< div class =item range> 
< input type =rangename =volumemin =1max =30ng-model =loanTerm>< / div> 
< label class =labelCal>每月< / label> 
< p>< input type =textdecimal-places ng-model =loanTermonkeypress ='return event.charCode> = 48&& event.charCode< = 57 || event.charCode == 46'min =0max =30STYLE =color：＃72A4D2;/>< / p>< br> 
  

精确我想做这样的事情

解决方案

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

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

$ $ p $ $ scopedrag = function（value）{
$ scope.years = Math.floor（value / 12）;
$ scope.months = value％12;
};

$ scope.rangeValue = 0;

然后在您的模板中

 <= c $ c>< input type =rangename =volumemin =0max =100ng-model =rangeValueng-change =drag（rangeValue）> 
< div>总计：{{rangeValue}}年份：{{years}}个月：{{months}}< / div> 
  

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

I am using a ionic range in my html page to set the number of months.It looks like this

I want this to display as years and months when i slide the ionic range. Ex: first months goes upto 12 and automatically becomes a year.How can i acheive this?

My html code for ionic range

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

To be Precise i want to do something like this

解决方案

I'll give you simplest code to show you how to do it, you can then add textboxes as in the UI above.

In the controller define following function and also init the initial value for the slider

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

$scope.rangeValue = 0;

Then in your template

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

Now when you drag the range input it will show the years and months.

这篇关于使用离子范围来设定月份和年份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！