角：テーブルとして配列をプリント

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

どのように私は4 * 4行列で、この配列を表示するためにng-repeatとng-tableを使用することができますか？（後で整理する方法を整理します:)

出典

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>

私はWeb開発に本当に新しいですので、誰もが私はここに喜んでいるでしょう、私がやれること何かを見つけた場合。

出典

2016-03-25 17:17:58 user1692261

ng-tableの代わりにng-repeatとbootstrapグリッド構造を使用することをお勧めします。それは実際に行と列を持つテーブルではないので、グリッド構造は私にはもっと意味があります。オースティンへ

<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

角：テーブルとして配列をプリント

答えて

関連する問題