angular.jsのng-repeatの使い方について

Question

初めてangularを触っている者です。
angularを使い、jsonデータをliタグ内に表示させたいのですが、ng−repeatを使用して、下記の例の様に、liタグ2つ毎にulで囲うことはできるのでしょうか？

//-----------以下script部分
angular.module('app', []).controller('AppController', function($scope, $http) {
$http.get('./xxxxx.json').success(function(data) {
$scope.data = data;

//-----------以下xxxxx.json部分
[
{user:{id:foo,name:bar}},
{user:{id:foo,name:bar}},
{user:{id:foo,name:bar}},
{user:{id:foo,name:bar}},
…
];

上記jsonデータを以下の様にulタグ内にliタグを２個づつ格納したい。
//-----------以下html部分

<ul> <li> <h2 class="id">foo</h2> <h3 class="name">name</h3> </li> <li> <h2 class="id">foo</h2> <h3 class="name">name</h3> </li> </ul> <ul> <li> <h2 class="id">foo</h2> <h3 class="name">name</h3> </li> <li> <h2 class="id">foo</h2> <h3 class="name">name</h3> </li> </ul> <ul> <li> <h2 class="id">foo</h2> <h3 class="name">name</h3> </li> <li> <h2 class="id">foo</h2> <h3 class="name">name</h3> </li> </ul>

どなたかご教授いただけませんでしょうか。何卒よろしくお願い致します。

Answer 1

こんな感じで如何？

angular.module('app', []).controller('AppController', function($scope, $http) {
  $scope.chunked_data = function(){ return _.chunk(($scope.data or []), 2);};
  $http.get('./xxxxx.json').success(function(data) {
    $scope.data = data; // これは既存の流れ
    ...

<ul ng-repeat="data_pairs in chunked_data()">
  <li ng-repeat="datum in data_pairs">
    <h2 class="id">{{datum.id}}</h2> 
    <h3 class="name">{{datum.name}}</h3> 
  </li> 
</ul>

Comments

[miyabi-sun]

https://lodash.com/docs#chunk
ちなみに先ほどのコードは
LodashというJavaScriptのライブラリに依存しています。

[tzaugment]

ご回答ありがとうございます。
コードを試させていただいたところ、コンソールに
　　Error: [$rootScope:infdig]
というエラーが出てしまいましたが、少し改変して、

js部分
angular.module('app', []).controller('AppController', function($scope, $http) {
$http.get('./xxxxx.json').success(function(data) {
$scope.data = data;
$scope.chunked_data = _.chunk(($scope.data or []), 2);
...

html部分を
<ul ng-repeat="data_pairs in chunked_data">
<li ng-repeat="datum in data_pairs">
<h2 class="id">{{datum.id}}</h2>
<h3 class="name">{{datum.name}}</h3>
</li>
</ul>

上記の様にしたところうまくいきました！
ありがとうございます！
最近はunderscore.jsよりLodashの方が人気があるんですね。勉強になりました。

[miyabi-sun]

あら、ケアレスミスがあったみたいですが伝わって良かったです。