Éléments de retour à la ligne avec répétition angular dans l’élément (regrouper les éléments dans ng-repeat)

J’essaie de regrouper les éléments dans un ng-repeat en utilisant une condition.

Un exemple de condition est de regrouper tous les éléments avec la même heure.

Les données:

[ {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'}, ... ] 

Le champ ‘time’ est en réalité un horodatage (1399372207) mais avec le temps exact, le résultat de l’exemple est plus facile à comprendre.

Je liste ces articles en utilisant ng-repeat:

 

{{r.name}}

également essayé avec:

 

{{r.name}}

Une sortie valide est:

 

AAA

BBB

CCC

DDD

EEE

Ma dernière option, s’il n’y a pas de solution simple à mon problème, serait de regrouper les données puis de les affecter à la variable d’étendue utilisée dans ng-repeat.

Des pensées?

Vous pouvez utiliser le filtre groupBy du module angular.filter .
vous pouvez donc faire quelque chose comme ceci:

utilisation: collection | groupBy:property collection | groupBy:property
utiliser une propriété nestede avec une notation par points: 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:

 
    Group name: {{ key }}
  • player: {{ player.name }}

RÉSULTAT:
Nom du groupe: alpha
* joueur: Gene
Nom du groupe: beta
* joueur: George
* joueur: Paula
Nom du groupe: gamma
* joueur: Steve
* joueur: Scruath

MISE À JOUR: jsbin

Premier groupe dans le contrôleur:

  $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(); }; 

Faites ensuite un filtre pour cela:

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

Puis modifiez le modèle:

  

{{r.name}}

VOIR DEMO

Juste une solution HTML simple pour les groupes statiques.

 
    Group name: Football
  • Player Name: {{ player.name }}
  • Group name: Basketball
  • Player Name: {{ player.name }}

Sortie:

Nom du groupe: Football
– Nom du joueur: Nikodem
– Nom du joueur: Lambert
Nom du groupe: Basketball
– Nom du joueur: John
– Nom du joueur: Izaäk
– Nom du joueur: Dionisia