Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have an array of items and I want to render it as a table with 2 columns.

I did the basic implementation which is rendering with only one column. Any suggestions please?

<body ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="i in items">
      <td>{{i}}</td>
    </tr>
  </table>
</body>


var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
  $scope.items = ["12", "22", "34", "657", "129"];
});

https://jsfiddle.net/nkarri/9czrqLny/1/

share|improve this question
    
what are the columns – Sajeetharan Jan 24 '16 at 8:29
    
Well, add the second column: <td>{{ whatYouWantToDisplayInTheSecondColumn }}</td>. But since you're looping on an array of strings, I wonder what you might want to display in the second column. – JB Nizet Jan 24 '16 at 8:37
up vote 1 down vote accepted

This is because your HTML only has a single <td> element, which you are not repeating. Since there's only 1, you get just 1 column. You'll need to have a nested ng-repeat in the <td> element in order to get more than 1 column, or explicitly have two <td> elements defined in your HTML.

You could try to write something more complicated to try to determine when a new column or row should be created, but I'd simplify things by creating your array into something that will be a little easier to consume: essentially a 2-dimensional array. Here's what I would do instead:

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <table>
            <tr ng-repeat="row in items">
                <td ng-repeat="column in row">{{column}}</td>
            </tr>
        </table>
    </div>
</body>

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
    $scope.items = [];
    $scope.items[0] = ["12", "22"];
    $scope.items[1] = ["34", "657"];
    $scope.items[2] = ["129", null];
});

https://jsfiddle.net/bntguybm/

Note that if any of these arrays were to contain more than 2 values, then you would also see extra columns for the rows that contains that data.

An alternative way would be like this, which would guarantee only 2 columns. You would need to create an array of objects for your items object. Like this:

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <table>
            <tr ng-repeat="row in items">
                <td>{{row.column1}}</td>
                <td>{{row.column2}}</td>
            </tr>
        </table>
    </div>
</body>

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
    $scope.items = [];
    $scope.items[0] = {};
    $scope.items[0].column1 = "12";
    $scope.items[0].column2 = "22";
    $scope.items[1] = {};
    $scope.items[1].column1 = "34";
    $scope.items[1].column2 = "657";
    $scope.items[2] = {};
    $scope.items[2].column1 = "129";
    $scope.items[2].column2 = null;
});

https://jsfiddle.net/6v1701gx/1/

share|improve this answer
up vote 0 down vote

I googled and figured it out. This is what I came up with using index.

<body ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="i in items" ng-if="$index%7 == 0">
      <td>{{items[$index]}}</td>
      <td>{{items[$index+1]}}</td>
      <td>{{items[$index+2]}}</td>
      <td>{{items[$index+3]}}</td>
      <td>{{items[$index+4]}}</td>
      <td>{{items[$index+5]}}</td>
      <td>{{items[$index+6]}}</td>
    </tr>
  </table>
</body>

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.items = ['12', '22', '34', '657', '129', '11', '23', '45', '65', '9', '76', '87', '90', '33', '51'];
});

https://jsfiddle.net/nkarri/9czrqLny/2/

share|improve this answer
1  
This works, but shows a serious design problem. Instead of having an array of strings, you should have an array of objects, where each object would have named fields: firstName, lastName, whatever. It's much clearer to use {{user.lastName}} than {{items[$index + 1] }}, isn't it? – JB Nizet Jan 24 '16 at 9:05
1  
not only the readability aspect; this design has another flaw. if you inspect the HTML output, you will see 6 empty tr in between every "used" one. ng-if causes them to be commented out, but they still exist. – Claies Jan 24 '16 at 9:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.