I am trying to print a 8x8 matrix in angular js . Below is index.html relevant part -
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
<tr ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">
<td>{{i+j}}</td>
</tr>
</tr>
but instead of printing a matrix it just prints number from 0 to 7. Where am i going wrong ?
Instead of creating row inside a row you need to do in this way.
<table>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
<td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">
{{i+j}}
</td>
</tr>
See this fiddle link
Thanks
2nd ng-repeat will be in td not nested tr
Try like this
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
<td ng-repeat="j in [0, 1, 2, 3, 4, 5, 6, 7]">
{{i+j }}
</td>
</tr>
{{ i+j }} not {{i+' '+j}}this could help
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
var matrix = 8;
$scope.matrix = []
for (var i = 0; i < matrix; i++) {
var row = [];
for (j = 0; j < matrix; j++) {
row.push(j+1);
}
$scope.matrix.push(row);
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="row in matrix">
<td ng-repeat="elem in row">{{elem}}</td>
</tr>
</table>
</div>Hope this helps. This program converts a single dimensional array to a matrix. If you have a two dimensional array, things are even simpler and you don't need the logic to calculate elements in each row. Everything else would however stays the same.
I have an array which i wanted to convert into a grid/matrix of column size 4. the following implementation worked for me. You can use the two counters : row and col as you like in side the nested ng-repeat
In my case number of columns is 3. But you can replace that 3 with a variable everywhere. h.seats is my array of the objects and i want to print either X or - based on value of element in that array
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
<td>{{row+1}}</td>
<td class="text-primary"
ng-repeat="(col, t) in h.seats track by $index"
ng-if="col >= (row)*3 && col < (row+1)*3">
<span ng-show="t.status"> X </span>
<span ng-show="!t.status"> - </span>
</td>
</tr>
</tbody>
</table>
</div>
<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th> prints the header row with column number at the top. getNumber(h.seats.length, 3) returns me the number of rows of that table as follows
.controller('CustomViewController', function ($scope, Principal, $state) {
$scope.getNumber = function(length, columns) {
return new Array(parseInt(length / columns + 1, 10));
}
The line ng-if="col >= (row)*3 && col < (row+1)*3" is important logic to calculate which elements should be put in that row.
The output looks like below
0 1 2 3
1 e1 e2 e3
2 e4 e5 e6
3 e7 e8
Refer to following link for details of how row and col counters are used: https://stackoverflow.com/a/35566132/5076414
