Home / Questions / 19786
Accepted
Dimoreno
Asked: 2020-08-06 16:34:18 +0800 CST 2020-08-06 16:34:18 +0800 CST

Group items from an array in Angularjs

  • 772

I have an array with hour values ​​which I present in a select tag as follows:

Select

07:00:00
07:10:00
07:20:00
07:30:00
07:40:00
07:50:00
08:00:00

But I want to know how to group them as follows:

07:00:00 - 07:10:00
07:10:00 - 07:20:00
07:20:00 - 07:30:00
07:30:00 - 07:40:00
07:40:00 - 07:50:00
07:50:00 - 08:00:00

This is what I have so far:

HTML

<div ng-controller="MyCtrl">
  <select ng-model="data.rh"
          ng-init="data.rh=rangoHoras[0].h"
          ng-options="rh.h as rh.h for rh in rangoHoras"
          style="color:#283593;">
  </select>
</div>

controller.js

function MyCtrl($scope) {
    $scope.rangoHoras=[
        {"h":"07:00:00"},{"h":"07:10:00"},{"h":"07:20:00"},
        {"h":"07:30:00"},{"h":"07:40:00"},{"h":"07:50:00"},
        {"h":"08:00:00"}
    ];
}
javascript

1 Answers

  1. Best Answer

    You can make a method that serves as a filter to return the schedules the way you want.

    $scope.generarRangoHoras =function() {
    var tmp = [];
    for(var i = 0;i<$scope.rangoHoras.length-1; i++){
      tmp.push({
        h:$scope.rangoHoras[i].h+ " - "+ $scope.rangoHoras[i+1].h
      });      
    }
    return tmp;
 }

    And the select is as follows

     <select ng-options="rh.h as rh.h for rh in generarRangoHoras()" ng-model="seleccionado"/>

    Example:

    http://codepen.io/DKbyo/pen/GqYwQb

    • 3