使用角js打印矩阵

Question

我试图打印一个8x8矩阵的角度js。以下是index.html相关部分-

<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>

但是它不是打印矩阵，而是从0到7打印数字。我哪里出错了？

Answer 1

而不是在行中创建行，您需要这样做。

<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>

​

参见此琴杆

谢谢

Answer 2

这可能会有帮助

​

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>

​

Answer 3

希望这能有所帮助。这个程序将一个一维数组转换为一个矩阵。如果您有一个二维数组，那么事情就更简单了，您不需要逻辑来计算每一行中的元素。然而，其他一切都将保持不变。

将数组转换为矩阵/网格

我有一个数组，我想把它转换成4列大小的网格/矩阵。下面的实现为我工作。您可以使用这两个计数器: row和col，在您喜欢的侧嵌套ng-重复。

在我的例子中，列数是3，但是到处都可以用变量替换3。h.seats是对象的数组，我希望根据该数组中元素的值打印X或-

<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>打印顶部有列号的标题行。getNumber(h.seats.length, 3)返回表的行数，如下所示

.controller('CustomViewController', function ($scope, Principal, $state) {

    $scope.getNumber = function(length, columns) {
        return new Array(parseInt(length / columns + 1, 10));   
    }

行ng-if="col >= (row)*3 && col < (row+1)*3"是计算应该在该行中放置哪些元素的重要逻辑。输出如下所示

0  1  2  3 
1  e1 e2 e3 
2  e4 e5 e6 
3  e7 e8 

有关如何使用行计数器和col计数器的详细信息，请参阅以下链接：https://stackoverflow.com/a/35566132/5076414