使用離子範圍設置幾個月和幾年

我用我的html頁面中的離子範圍設置months.It的數量看起來是這樣的使用離子範圍設置幾個月和幾年

enter image description here

我想這顯示爲年和月當我滑動離子範圍。例如：第一個月會上升到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>

準確地說我想要做這樣的事情

enter image description here

來源

2014-11-05 CraZyDroiD

你可以讓jsfiddle.net？ – Amy 2014-11-05 05:29:00

沒有太多可以做成jsfiddle – CraZyDroiD 2014-11-05 06:05:01

我給你告訴你如何做到這一點最簡單的代碼，然後你可以像上面的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>

當你拖動範圍的輸入就會顯示出年個月。

來源

2014-11-05 06:06:50 Tekz

謝謝。它的工作！ – CraZyDroiD 2014-11-05 06:29:40

使用離子範圍設置幾個月和幾年

回答

相關問題