Angular ng-repeat conditional wrap items in element (group items in ng-repeat)

by

You can use groupBy filter of angular.filter module.
so you can do something like this:

usage: collection | groupBy:property
use nested property with dot notation: 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>

RESULT:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath

UPDATE: jsbin

More Related Contents:

  1. Angular ng-repeat add bootstrap row every 3 or 4 cols
  2. How to make ng-repeat filter out duplicate results
  3. ng-repeat :filter by single field
  4. Calculating sum of repeated elements in AngularJS ng-repeat
  5. Difficulty with ng-model, ng-repeat, and inputs
  6. Adding parameter to ng-click function inside ng-repeat doesn’t seem to work
  7. AngularJS – How to structure a custom filter with ng-repeat to return items conditionally
  8. Custom sort function in ng-repeat
  9. passing 2 $index values within nested ng-repeat
  10. ng-repeat filtering data by date range
  11. How to use ng-repeat for dictionaries in AngularJs?
  12. Directive isolate scope with ng-repeat scope in AngularJS
  13. AngularJS : Custom filters and ng-repeat
  14. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  15. AngularJS – How can I reference the property name within an ng-Repeat
  16. AngularJS : ng-repeat filter when value is greater than
  17. AngularJS Group By Directive without External Dependencies
  18. Angular orderBy number sorting as text in ng-repeat
  19. Using comma as list separator with AngularJS
  20. How to use “ng-repeat” within template of a directive in Angular JS?
  21. Using ng-repeat to generate select options (with Demo)
  22. What is `priority` of ng-repeat directive can you change it?
  23. AngularJS – Filter empty objects
  24. shuffle array in ng-repeat angular
  25. Filtering an Angular 1.2 ng-repeat with “track by” by a boolean property
  26. How to highlight a selected row in ngRepeat?
  27. ng-repeat specify a starting index
  28. angularjs text area character counter
  29. How to obtain previous item in ng-repeat?
  30. Angular ng-click event delegation

Leave a Comment