Print a matrix using angular js

Question

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 ?

score 3 · Accepted Answer · answered Nov 23 '15 at 09:24

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

Anik Islam Abhi · Answer 2 · 2015-11-23T10:39:31.587

2

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>

JSFIDDLE

edited Nov 23 '15 at 10:39

answered Nov 23 '15 at 09:15

Anik Islam Abhi

25,137
8
58
80

why in td. can u please explain . – Subham Tripathi Nov 23 '15 at 09:53
1

tr will create row .. in order to create cell/block you have to use td. that's the structure of html table. @SubhamTripathi – Anik Islam Abhi Nov 23 '15 at 09:55
sry but ur answer works only when i use `{{ i+j }}` not `{{i+' '+j}}` – Subham Tripathi Nov 23 '15 at 10:02

score 0 · Answer 3 · answered Nov 23 '15 at 09:25

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>

score 0 · Answer 4 · edited May 23 '17 at 12:09

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.

Convert an array into a matrix/ grid

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

Print a matrix using angular js

4 Answers4

Convert an array into a matrix/ grid