Question

我正在训练html和angular，我想创建一个记忆游戏。

我有一个16（8 * 2）个图像的数组，我正在寻找一种在表格结构中显示这些图像的简单方法。

var app = angular.module('memoryGame', []);
app.controller('gameCtrl', function ($scope) {
    $scope.gary = "images/Gary.png";
    $scope.larry = "images/Larry.png";
    $scope.mrkrabs = "images/MrKrabs.jpg";
    $scope.patrick = "images/Patrick.png";
    $scope.plankton = "images/Plankton.JPG";
    $scope.sandy = "images/Sandy.jpeg";
    $scope.spongebob = "images/Spongebob.png";
    $scope.squidward = "images/Squidward.jpg";

    $scope.cards = [$scope.gary, $scope.larry, $scope.mrkrabs,
                    $scope.patrick, $scope.plankton, $scope.sandy,
                    $scope.spongebob, $scope.squidward];

    Array.prototype.push.apply($scope.cards, $scope.cards);

如何使用ng-repeat和ng-table以4 * 4矩阵显示此数组？（我稍后会解决如何填充数组:)）

Answer 1

我建议使用ng-repeat和bootstrap网格结构而不是ng-table。它实际上不是一个包含行和列的表格，所以网格结构对我来说更有意义。

<div class="row">
    <div class="col-md-3" ng-repeat="card in cards">
        <!--image here using card-->
    </div>
</div>

Answer 2

感谢奥斯汀，我最终得到了这个解决方案：

<form id="contactForm">
            <input type="text" name="email" placeholder="not required"/>
            <select class="form-control" name="category">
                <option value="wrong">Wrong data</option>
                <option value="feedback">Feedback</option>
                <option value="inquiry">General Inquiries</option>
            </select>
            <textarea name="body" class="form-control" placeholder="Let us know how to improve"></textarea><br>
            <input type="submit" ng-click="submit = 'true'" value="submit" /><br> <span ng-show="submit == 'true'" class="feedback">Thank you! We'll respond to your comments soon.</span>
</form>

由于我对Web开发很陌生，如果有人找到了我能做得更好的东西，我会很高兴来到这里。

Angular：将数组打印为表格

2 个答案: