对象的角度ng重复索引

Angular ng-repeat index of object

本文关键字：索引 ng 对象      更新时间：2024-04-29

我有一个类似的对象

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

使用ng重复，我试图将信息显示为如下网格。

    <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>
就像表一样，我想把它们显示为引导程序网格。为了做到这一点，我想使用它们的索引对对象进行迭代。如何实现这样的网格视图？

$index就是您想要的。（为下一个索引添加一个和边界检查）除非你在寻找第一个或最后一个项目，否则就会有$first或$last。

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

更新对象-可以使用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>

这是更新后的plunk:

希望这能有所帮助！

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

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

或

<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;
相关文章：