ng-change AngularJS

0

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

    
asked by Dimoreno 17.10.2016 в 02:45
source

1 answer

1

This happens because you are not cleaning the list before adding the data, so that the $scope.ngChange method works, it should look like this:

  $scope.ngChange = function () {
    var varRangos = rango(s, e, $scope.mm);
    $scope.ran = []; // se limpia el arreglo para agregar la nueva información
    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});
    }
  }
    
answered by 17.10.2016 / 02:59
source