Question

我有像

这样的对象

    {
      "2015": ["path",0, 0],
      "2016": ["path",0, 0],
      "2017": ["path",0, 0],
      "2018": ["path",0, 0],
    }

使用ng-repeat我试图将信息显示为如下所示的网格。

    <div class = "row">
      <div class = "col-sm-4"></div>
      <div class = "col-sm-4"></div>
      <div class = "col-sm-4"></div>
    </div>

我尝试过以下代码

    <div ng-repeat="(exam, data) in imageJSON">
      <div class="row grid-divider" ng-if="$index%3 == 0">
        <div class="col-sm-3">{{exam}} {{index}}
        <div class="col-sm-3">{{exam}} {{index + 1}}
        <div class="col-sm-3">{{exam}} {{index + 2}}
      </div>
    </div>

我希望它显示如下

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      2014
      <br>"path"
    </td>
    <td>
      2015
      <br>"path"
    </td>
    <td>
      2016
      <br>"path"
    </td>
  </tr>
  <tr>
    <td>
      2017
      <br>"path"
    </td>
    <td>
      2018
      <br>"path"
    </td>
    <td>
      2019
      <br>"path"
    </td>
  </tr>
</table>

就像表一样，我想将它们显示为引导网格。为了做到这一点，我想使用他们的索引迭代对象。如何实现这样的网格视图？

Answer 1

$ index是您正在寻找的。（添加一个并对下一个索引进行边界检查）除非您正在寻找第一个或最后一个项目，然后是第一个或最后一个。

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

针对对象更新 - 可以使用angularjs的$ index服务获取索引，如下所示：

<div>
  <div ng-repeat="(key, prop) in names track by key">
    <span>{{ $index + 1 }}</span>
    <span>{{ key }}</span>
    <span>{{names[key][0]}}</span>
  </div>
</div>

Here is更新的插件：

希望这有帮助！

Answer 3

如果我理解正确，这应该有效：

<div class="table">
  <div class="row" ng-repeat="(year, array) in object">
    <div class="col-sm-4 row-header">{{ year }}</div>
    <div class="col-sm-4 row-items" ng-repeat="item in array">{{ item }}</div>
  </div>
</div>

OR

<div class="table">
  <div class="row" ng-repeat="(year, array) in object">
    <div class="col-sm-4 row-items" ng-repeat="item in array">{{ year }} {{ item }}</div>
  </div>
</div>

取决于你的意思。

修改

标记：

<table> <tr ng-repeat="row in imageJSON"> <td ng-repeat="item in row"> {{ item.exam }} <br>{{ item.data }} </td> </tr> </table>

角：

var CELLS_IN_ROW = 3; var imageJSON = { "2015": ["path",0, 0], "2016": ["path",0, 0], "2017": ["path",0, 0], "2018": ["path",0, 0] }; var array = []; var count = 0; angular.forEach(imageJSON, function (value, key) { array[Math.floor(count / CELLS_IN_ROW)] = array[Math.floor(count / 3)] || []; array[Math.floor(count / CELLS_IN_ROW)].push({ exam: key, data: value[0] }); count++; }); $scope.imageJSON = array;

对象的角度ng重复索引

3 个答案: