使用ng-repeat Angular.js创建一个网格

Question

我有一个列表，我想用过滤器对我的项目进行排序，根据每个人的得分从最高到最低显示。我只想展示存在的13个中的前8个。我想从左到右显示从最高到最低分数的网格。

我可以点击“总和得分”来提高一个人的得分。按钮并输入对象的索引。我不知道如何默认使用这个网格，只有人改变。

<span ng-repeat='item in list | orderBy: "-score"'>
<p style='display:{{$index>7?"none":"block"}}'>
  {{item.name}} score {{item.score}}
</p>
</span>
<h2>index min 0 - max 12</h2>
<button ng-model='btn' ng-click='sumKey()'>Sum Score</button>
<input type='number' ng-model='mytext' max=12 min=0>  

$scope.list=[
 {'name': 'pedro', 'score':1},
  {'name': 'miguel', 'score':2},
  {'name': 'juan', 'score':3},
  {'name': 'david', 'score':4},
  {'name': 'yeison', 'score':5},
  {'name': 'doraemon', 'score':6},
  {'name': 'goku', 'score':7},
  {'name': 'vegeta', 'score':8},
  {'name': 'seiya', 'score':9},
  {'name': 'bruno', 'score':10},
  {'name': 'faver', 'score':11},
  {'name': 'cane', 'score':12},
  {'name': 'brye', 'score':13}
]

http://jsfiddle.net/bLrft3nx/

谢谢

Answer 1

对于前8的限制，您可以使用limitTo过滤器：

<span ng-repeat='item in list | orderBy: "-score" | limitTo: 8'>
  <p>
    {{item.name}} score {{item.score}}
  </p>
</span>

对于网格，既然你提到了Bootstrap（我假设它是3.x，但它应该适用于其他版本），你可以定义一个包含多个类col-md-3列的行（如果你想要回应）。这将有效地创建一个每行4列的网格（因为Bootstrap网格宽度为12个槽，并且它将包裹到每个12 / 3 = 4列的下一行）。

<div class="row">
  <div class="col-xs-3" ng-repeat='item in list | orderBy: "-score" | limitTo: 8'>
    <p>
      {{item.name}} score {{item.score}}
    </p>
  </div>
</div>

更新

这是展示它的jsfiddle。我还添加了课程col-sm-3和col-xs-3来说明预览区域的小尺寸;如果要确保它始终是网格，则可以包括所有col-*-3类，而不管视口大小。

更新2

如果您希望网格应用于所有视口大小，则可以将col-md-3替换为col-xs-3;无需添加所有col-*-3类。上面的代码段已更新，此处为another jsfiddle。