Javascript 使用ng repeat Angular.js创建网格

我有一个列表，我想用一个过滤器对我的项目进行排序，根据每个人的得分从高到低显示。我只想展示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}
]

---

感谢您限制进入前8名，您可以使用

limito

过滤器：

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

使现代化 这里有一个例子来说明这一点。我还添加了类

col-sm-3

和

col-xs-3

，以说明预览区域的小尺寸；如果您想确保它始终是一个网格，无论视口大小如何，都可以包含所有的

col-*-3

类

更新2

---

如果希望网格应用于所有视口大小，可以将

col-md-3

替换为

col-xs-3

；无需添加所有

col-*-3

类。上面的代码段已经更新，下面是。

您是否使用任何前端库，如引导或材质设计？@tavnab only Bootstrap..@tavnab我只使用class.row.cols…试试这个@yogendarji它不起作用…谢谢，我尝试了您的代码但不起作用。。我怀疑这是因为JSFIDLE的预览区域很小。查看我的更新。

<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>