ng-repeat values with 3 columns in table? - AngularJS

Question

I'm trying to display data in 3 column table format.

With the below code am able to get data in 3 column format but I want it in proper table, with tr and td.

 <body ng:app="myApp" ng:controller="myCtrl">
    <span ng:repeat="(index, value) in array">
        {{value}}<br ng:show="(index+1)%3==0" />
    </span>
</body>

and

    lvar app = angular.module('myApp', []);

app.controller('myCtrl', function ($scope) {
    $scope.array = ["opt1","opt2","opt3","opt4","opt5","opt6","opt7"];
});

Fiddle: http://jsfiddle.net/JG3A5/

I tried but with ng-repeat I'm not able to achieve it properly. Can someone help me out with this?

You're using the repeat syntax for an object, arrays are simply item in items - are you able to change the format of your data? — tymeJV
– tymeJV, Commented Apr 13, 2015 at 15:57

tymeJV · Accepted Answer · 2015-04-13 16:07:45Z

3

If you can change your data format, it'd certainly be easier to have an array of arrays, each inner array representing a row:

$scope.data = [
    ["opt1", "opt2", "opt3"],
    ["opt1", "opt2", "opt3"],
    ["opt1", "opt2", "opt3"]
];

You could then do a simple inner ng-repeat

<table>
    <tr ng-repeat="row in data">
        <td ng-repeat="column in row">{{column}}</td>
    </tr>
</table>

Demo: http://jsfiddle.net/JG3A5/75/

answered Apr 13, 2015 at 16:07

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

ng-repeat values with 3 columns in table? - AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related