Inside a select tag I have a list of numbers (minutes) which, when selected, shows as a result a new list with a range of hours between 08:00:00 and 09:00:00
for example if the number 10 is selected the list to be displayed will have the following result 08:00:00 - 08:10:00, 08:10:00 - 08:20:00 ....... 08 : 50: 00 - 09:00:00
The range is always displayed depending on the number of minutes selected. For this I have used the following:
html view
<div class="row">
<div class="col col-50">
<div class="item item-input item-select">
<div class="input-label positive">
Tiempo
</div>
<select ng-change="ngChange()" ng-model="mm" ng-options="mm.minuto as mm.minuto for mm in numeros">
<option value="">Tiempo</option>
</select>
</div>
</div>
<div class="col col-50">
<h4 ng-repeat="a in ran"> ({{a.h}}) </h4>
</div>
</div>
Controller.js
$scope.horario1="08:00:00";
$scope.horario2="09:00:00";
var s = moment($scope.horario1, 'H:mm:ss');
var e = moment($scope.horario2, 'H:mm:ss');
$scope.ran = [];
$scope.numeros = [{ minuto: 10 }, { minuto: 20 }, { minuto: 30 }];
var rango=function(s, e, minutes){
var range = [];
for(var hour = moment(s); hour.isBefore(e); hour.add(minutes, 'minutes') ){
range.push(moment(hour));
}
range.push(moment(e));
return range;
}
$scope.ngChange = function () {
var varRangos = rango(s, e, $scope.mm);
for(var p = 0; p < varRangos.length-1; p++){
var hora=moment(varRangos[p]).format('HH:mm:ss');
var hora2=moment(varRangos[p+1]).format('HH:mm:ss');
$scope.ran.push({h:hora+' - '+hora2});
}
}
This code works correctly BUT at the moment of showing in the list the ranks accumulate; that is to say if I press 10 in the first instance the list with the rank of ten is shown, but if I press 20 or 30 to that list they accumulate and the result shows the list with all the ranges.
How can I fix that problem?
Finally, as I can do, by default, the range is 10 and that when I start the application, I show the list with the hours with rank 10
I hope you made me understand in advance I thank you