Angular ng-repeat Index des Objekts

Question

Ich habe ein Objekt wie

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

Mit ng-repeat Ich versuche, wie unten die Informationen als Gitter angezeigt werden soll.

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

Ich habe den folgenden Code versucht

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

ich will es wie angezeigt unter

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>

Wie wie Tisch, ich möchte, dass sie als Bootstrap-Raster angezeigt werden soll. Um das zu tun, möchte ich mit dem Index über das Objekt iterieren. Wie implementiert man eine solche Rasteransicht?

Answer 1

$ Index ist, was Sie suchen. (addiere eins und Schranken suche nach dem nächsten Index), außer du suchst nach dem ersten oder letzten Gegenstand, dann gibt es $ first oder $ last.

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

Answer 2

für Objekt aktualisiert - Index mit $ Index Service von AngularJS wie unten erhältlich:

<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 die aktualisierte zupfen:

hoffe, das hilft!

Answer 3

Wenn ich richtig verstehe, sollte diese Arbeit:

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

ODER

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

je nachdem, was Sie meinen.

---

bearbeiten

Markup:

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

Eckig:

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;