using ionic range to set months and years

问题:

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

回答1:

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.