Angular ng-repeat index of object

Question

I have an object like

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

Using ng-repeat I am trying to display the info as a grid like below.

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

I have tried the following code

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

I want it to display like below

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>

As like table, I want to display them as bootstrap grid. In order to do that, I want to iterate over the object using their index. How to implement such grid view?

show what you have tried

Divyesh Savaliya
– Divyesh Savaliya

2016-04-12 05:44:02 +00:00
Commented Apr 12, 2016 at 5:44 — Divyesh Savaliya
– Divyesh Savaliya, Commented Apr 12, 2016 at 5:44
Thanks, updated the question

AbiSivam
– AbiSivam

2016-04-12 05:50:15 +00:00
Commented Apr 12, 2016 at 5:50 — AbiSivam
– AbiSivam, Commented Apr 12, 2016 at 5:50

Nathan · Accepted Answer · 2016-04-12 05:44:52Z

3

$index is what you're looking for. (add one and bounds check for the next index) unless you're looking for the first or last item, then there's $first or $last.

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

answered Apr 12, 2016 at 5:44

Nathan

6,2244 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishal · Accepted Answer · 2016-04-12 12:27:57Z

0

Updated for Object - Index can be obtained using $index service of angularjs as below:

<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 the updated plunk :

Hope this helps!

edited Apr 12, 2016 at 12:27

answered Apr 12, 2016 at 5:46

Vishal

11k23 gold badges90 silver badges136 bronze badges

4 Comments

AbiSivam Over a year ago

This works in case of array. But my problem contains object for which $index doesnot work.

Vishal Over a year ago

Updated the solution above for objects. Hope it works fine for you now.

AbiSivam Over a year ago

Thank you :) But I need to iterate through the (key,prop) not the names[key]. Updated the question with more details. Hope you can get to know my problem now

Vishal Over a year ago

Answer and plunk modified as per your requirement. I hope its the thing you wanted.

yclee0210 · Accepted Answer · 2016-04-13 01:05:34Z

0

If I understand correctly, this should work:

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

depending on what you mean.

Edit

Markup:

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

Angular:

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;

edited Apr 13, 2016 at 1:05

answered Apr 12, 2016 at 5:59

yclee0210

1314 bronze badges

1 Comment

AbiSivam Over a year ago

Thank you. But I need to iterate through the (year, array) as col-sm-4 value rather than "item in array". I have updated the question with more details. Hope you can get a clear picture of my problem now

Collectives™ on Stack Overflow

Angular ng-repeat index of object

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related