Ich versuche, die Elemente in einer Wiederholungsgruppe mit einer Bedingung zu gruppieren.
Eine Beispielbedingung ist das Gruppieren aller Elemente mit derselben Stunde.
Die Daten:
[
{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'},
...
]
Das 'Zeit'-Feld ist eigentlich ein Zeitstempel (1399372207), aber mit der genauen Uhrzeit ist die Beispielausgabe leichter verständlich.
Ich liste diese Artikel mit ng-repeat auf:
<div ng-repeat="r in data| orderBy:sort:direction">
<p>{{r.name}}</p>
</div>
auch probiert mit:
<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
<p>{{r.name}}</p>
<div ng-repeat-end></div>
Eine gültige Ausgabe ist:
<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>
Meine letzte Option, wenn es keine einfache Lösung für mein Problem gibt, wäre, die Daten zu gruppieren und dann der in ng-repeat verwendeten Gültigkeitsbereichsvariablen zuzuordnen.
Irgendwelche Gedanken?
Sie können groupBy filter von angle.filter module verwenden.
Sie können so etwas tun:
usage:collection | groupBy:property
verschachtelte Eigenschaft mit Punktnotation verwenden: 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>
ERGEBNIS:
Gruppenname: alpha
* Spieler: Gene
Gruppenname: Beta
* Spieler: George
* Spielerin: Paula
Gruppenname: gamma
* Spieler: Steve
* Spieler: Scruath
UPDATE:jsbin
Erste Gruppe im 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();
};
Dann machen Sie einen Filter dafür:
myApp.filter('groupby', function(){
return function(items,group){
return items.filter(function(element, index, array) {
return parseInt(element.time)==group;
});
}
}) ;
Dann Vorlage ändern:
<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>
SEHEN DEMO
Nur eine einfacheHTML-Lösung für statische Gruppen.
<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>
Ausgabe:
Gruppenname: Fußball
- Spieler Name: Nikodem
- Spieler Name: Lambert
Gruppenname: Basketball
- Spielername: John
- Spieler Name: Izaäk
- Spieler Name: Dionisia