web-dev-qa-db-fra.com

Éléments conditionnels d'habillage conditionnel avec répétition angulaire dans l'élément (éléments du groupe dans répétition angulaire)

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

Un exemple de condition consiste à regrouper tous les éléments ayant 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 'heure' est en fait un horodatage (1399372207) mais avec l'heure exacte, l'exemple de sortie est plus facile à comprendre.

J'énumère ces articles en utilisant ng-repeat:

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

également essayé avec:

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

Une sortie valide est:

<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>

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 de portée utilisée dans ng-repeat.

Des pensées?

angularjsangularjs-ng-repeatng-repeat
51
Catalin MUNTEANU

Vous pouvez utiliser le filtre groupBy de angular.filter module.
afin que vous puissiez faire quelque chose comme ceci: 

usage:collection | groupBy:property
utilise une propriété imbriquée avec la 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:

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

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

UPDATE:jsbin

140
a8m

Premier groupe dans 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();
};

Puis faites 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 changer de modèle:

 <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>

VOIR D&EACUTE;MO

15
Nitish Kumar

Juste un simpleHTMLsolution pour les groupes statiques.

<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>

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 

0
empax