CODEWITHSUNDEEP
javascriptjsonangularjsangularjs-ng-repeat
Sergio
Sergio

Reputation: 655

Creating table from json

I have this table

<table class="table">
    <tr>
    <td ng-repeat="(k, obj) in items | orderBy:'key'">{{obj.key}}</td>
  </tr>
</table>

That shows a table of only one row with all the items in the json ($scope.items) ordered alphabetically by the key value.

Is there any way to make it so that it has a fixed number of columns, more than one row and keeps being sorted by the key value?

Upvotes: 2

Views: 78

Answers (4)

AlexGorale
AlexGorale

Reputation: 21

Try this fiddle to get yourself started

https://jsfiddle.net/U3pVM/17932/

<table class="table" ng-controller="tstCtrl">
    <tr ng-repeat="(k, obj) in items | orderBy:'key'">
        <td>{{k}}</td>
        <td>{{obj.name}}</td>
        <td>{{obj.type}}</td>
  </tr>
</table>

The short answer is yes. You need to change how you are using ng-repeat. It does not repeat the tag it is contained within, only the tags inside the ng-repeat tag.

Upvotes: 2

Joy Biswas
Joy Biswas

Reputation: 6527

You need the parent index and slice up array put a tr every X times

<table class="table">
  <tr ng-repeat="trs in items" ng-if="$index % howMany == 0" ng-init="pIdx=$index">
     <td ng-repeat="(k, obj) in items.slice(pIdx,pIdx+howMany) | orderBy:'key'">{{obj.key}}</td>
  </tr>
</table>

In this example declare a variable var howMany = 6 so it will have 6 tds every row.

Upvotes: 2

Zachary Kuhn
Zachary Kuhn

Reputation: 1152

This will show a fixed number of columns and remain sorted.

<table class="table">
  <tr>
    <th>Key</th>
    <th>Other Property</th>
  </tr>
  <tr ng-repeat="(k, obj) in items | orderBy:'key'">
    <td>{{obj.key}}</td>
    <td>{{obj.otherProperty}}</td>
  </tr>
</table>

Upvotes: 1

blurfus
blurfus

Reputation: 14031

Add the ng-repeat to the <tr> - like:

<table class="table">
    <tr ng-repeat="(k, obj) in items | orderBy:'key'">
    <td>{{obj.key}}</td>
    <td>{{obj.propertyOne}}</td>
    <td>{{obj.propertyTwo}}</td>
  </tr>
</table>

In this case, you have a three column table (add/remove columns as you wish and change the properties depending on your objects's properties

Upvotes: 0

Related Questions