Угловая: печатная матрица как таблица

Я тренируюсь с html и угловым, и я хочу создать игру с памятью.Угловая: печатная матрица как таблица

У меня есть массив из 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 матрицы? (я буду разбираться позже, как наполнить массив :))

источник

2016-03-18 user1692261

Благодаря Остин, я закончил с этим решением:

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

Поскольку я действительно новичок в веб-разработке, если кто-нибудь найти то, что я мог бы сделать лучше, я буду рад здесь.

источник

2016-03-25 17:17:58 user1692261

Я бы предложил использовать структуру сетки ng-repeat и bootstrap вместо ng-table. Это не таблица с строками и столбцами, поэтому структура сетки имеет для меня больше смысла.

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

источник

2016-03-18 19:16:41 Austin

Спасибо. Я пробовал это, но элемент слишком далек друг от друга. Как я могу сделать его более похожим на игровое поле памяти? как большой '#'. Редактировать: возможно, используйте только столбцы 5-9. – user1692261

Вы можете переопределить отступы и поля столбцов и строк начальной загрузки, чтобы сделать их рядом друг с другом. – Austin

Можете ли вы объяснить, пожалуйста, как это делается? – user1692261

Угловая: печатная матрица как таблица

ответ

Смежные вопросы