Angular: Print array as a table

Question

I am training with html and angular, and I want to create a memory game.

I have an array of 16(8*2) images, and I am looking for an easy way to display those images in a table structure.

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

How can I use ng-repeat and ng-table to display this array in 4*4 matrix? (I will sort out later how to suffle the array :) )

Austin · Accepted Answer · 2016-03-18 19:16:41Z

1

I would suggesting using ng-repeat and bootstrap grid structure instead of ng-table. It's not really a table with rows and columns so the grid structure makes more sense to me.

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

answered Mar 18, 2016 at 19:16

Austin

1,29110 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1692261 Over a year ago

Thanks. I tried this but the element are too far from each other. How can I make it more like a memory game board? like a big #. Edit: maybe use only columns 5-9.

Austin Over a year ago

You can override the padding and margins of the bootstrap columns and rows to make them right next to each other

Austin Over a year ago

You need to add css to override the col-md-3 class padding: col-md-3 { margin-left: 2px; margin-right: 2px }

user1692261 · Accepted Answer · 2016-03-25 17:17:58Z

Thanks to Austin, I have ended up with this solution:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="angular.min.js"></script>
    <script src="game_controller.js"></script>

    <style>
        img {
            height: 100px;
            width: 100px;
        }

    </style>

</head>

<body ng-app="memoryGame" ng-controller="gameCtrl">
    <div class="row">
        <h1 align="center">Memory Game</h1>
    </div>

    <div class="col-md-3"></div>

    <div class="col-md-6">
            <div class="col-md-3" style="margin-top: 30px;" ng-repeat="card in cards track by $index">
                <img ng-src="{{ card }}" alt="Description" />    
            </div>
    </div>

    <div class="col-md-3"></div>
</body>
</html>

Since I am really new to web development, if anyone find something I could do better I will be glad to here.

Collectives™ on Stack Overflow

Angular: Print array as a table

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related