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"];
});
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;
});
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'];
});
{{user.lastName}} than {{items[$index + 1] }}, isn't it?
tr in between every "used" one. ng-if causes them to be commented out, but they still exist.
<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.