angularjs - array - Elementos de ajuste condicional ng-repeat angular en elemento(elementos de grupo en ng-repeat)

ng-repeat filter

Question

Intento agrupar los elementos en una repetición ng usando una condición.

Una condición de ejemplo es agrupar todos los elementos con la misma hora.

Los datos:

[
    {name: ''AAA'', time: ''12:05''},
    {name: ''BBB'', time: ''12:10''},
    {name: ''CCC'', time: ''13:20''},
    {name: ''DDD'', time: ''13:30''},
    {name: ''EEE'', time: ''13:40''},
    ...
]

El campo ''tiempo'' es en realidad una marca de tiempo (1399372207) pero con el tiempo exacto en que la salida del ejemplo es más fácil de entender.

Estoy enumerando estos artículos usando ng-repeat:

<div ng-repeat="r in data| orderBy:sort:direction">
   <p>{{r.name}}</p>
</div>

también intenté con:

<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
    <p>{{r.name}}</p>
<div ng-repeat-end></div>

Un resultado válido es:

<div class="group-class">
    <div><p>AAA</p></div>
    <div><p>BBB</p></div>
</div>
<div class="group-class">
    <div><p>CCC</p></div>
    <div><p>DDD</p></div>
    <div><p>EEE</p></div>
</div>

Mi última opción, si no hay una solución simple para mi problema, sería agrupar los datos y luego asignarlos a la variable de ámbito utilizada en ng-repeat.

¿Alguna idea?

Answer 1

Primero haz un grupo en Controller:

 $scope.getGroups = function () {
    var groupArray = [];
    angular.forEach($scope.data, function (item, idx) {
        if (groupArray.indexOf(parseInt(item.time)) == -1) {
            groupArray.push(parseInt(item.time));
        }
    });
    return groupArray.sort();
};

Luego haz un filtro para eso:

 myApp.filter(''groupby'', function(){
    return function(items,group){       
       return items.filter(function(element, index, array) {
        return parseInt(element.time)==group;
       });        
    }        
 }) ; 

Luego cambia la plantilla:

 <div ng-repeat=''group in getGroups()''>
     <div ng-repeat="r in data | groupby:group" class="group-class">
         <div><p>{{r.name}}</p></div>
     </div>
 </div>

VER DEMO

Answer 2

Puede usar groupBy filter of angular.filter module.
para que pueda hacer algo como esto:

uso: collection | groupBy:property collection | groupBy:property
utilizar propiedad anidada con notación de puntos: property.nested_property
JS:

$scope.players = [
  {name: ''Gene'', team: ''alpha''},
  {name: ''George'', team: ''beta''},
  {name: ''Steve'', team: ''gamma''},
  {name: ''Paula'', team: ''beta''},
  {name: ''Scruath'', team: ''gamma''}
];

HTML:

<ul ng-repeat="(key, value) in players | groupBy: ''team''">
  Group name: {{ key }}
  <li ng-repeat="player in value">
    player: {{ player.name }} 
  </li>
</ul>

RESULTADO:
Nombre del grupo: alfa
* jugador: Gene
Nombre del grupo: beta
* jugador: George
* jugador: Paula
Nombre del grupo: gamma
* jugador: Steve
* jugador: Scruath

ACTUALIZACIÓN: jsbin

Answer 3

Simplemente una solución HTML simple para grupos estáticos.

<ul>
  Group name: Football
  <li ng-repeat="player in players" ng-if="player.group == ''football''">
    Player Name: {{ player.name }} 
  </li>
  Group name: Basketball
  <li ng-repeat="player in players" ng-if="player.group == ''basketball''">
    Player Name: {{ player.name }} 
  </li>
</ul>

Salida:

Nombre del grupo: Fútbol
- Nombre del jugador: Nikodem
- Nombre del jugador: Lambert
Nombre del grupo: Baloncesto
- Nombre del jugador: John
- Nombre del jugador: Izaäk
- Nombre del jugador: Dionisia