分组重复Ng | AngularJS

Question

I have data,something like this (its come from SWARM,backend) :

$scope.games = [
  {"categories":["1"],"id":"id1"},
  {"categories":["1"],"id":"id2"},
  {"categories":["1"],"id":"id3"},
  {"categories":["1"],"id":"id4"},
  {"categories":["2"],"id":"id5"},
  {"categories":["2"],"id":"id6"},
  {"categories":["2"],"id":"id7"},
  {"categories":["3"],"id":"id8"},
  {"categories":["3"],"id":"id9"}
  {"categories":["4"],"id":"id10"}
];

So, now its visible in content without any category grouping , like

id1 id2 id3 id4 id5 id6 id7 id8 id9 id10

But i need to do:

Category '1'
id1 id2 id3 id4

Category '2'
id5 id6 id7 

Category '3'
id8 id9 

Category '4'
id10

HTML source:

<ul>
  <li ng-repeat="game in games by game.id">
     ...               
  </li>
</ul>

Any ideas how ? Thanks in advance!

Answer 1

Why not make the date structured a bit?
For (a simplest) example:

$scope.games = {
  "1": ["id1", "id2", "id3", "id4"],
  "2": ["id5", "id6", "id7"]
}

... and so on.

Answer 2

Try this.

<ul>
    <li ng-repeat="(categories, catGames) in (games | groupBy: 
         'categories')">
    {{categories}}
    <ul>
        <li ng-repeat="game in catGames">
        {{game.id}}
        </li>
    </ul>
    </li>