0

私は Web アプリケーションを持っており、それは動的になります。テンプレートを作成するだけで、json でデータを取得できます。特に、私はこれらのカードを持っています:

プランカーのデモ

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body class="landing">
    <section id="intro">
      <div class="inner">
        <h2>Title</h2>
        <!-- Cards -->
        <div class="cards">
          <div class="riga">
            <div class="r2">
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb2.png" />
                      </div>
                      <div class="user">
                        <img src="img/img1.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                    Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb.png" />
                      </div>
                      <div class="user">
                        <img src="img/img2.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                   Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb2.png" />
                      </div>
                      <div class="user">
                        <img src="img/img3.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                    Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end inner -->
    </section>
  </body>

</html>

私は N 枚のカードを持ち、すべてに独自のテキストがあります。それらを動的に作成するための最良のソリューションは何ですか? データの前に呼び出し、json 文字列ごとにカードを作成することを考えました。最高のテクニックは何ですか?ng-repeat または ng-switch を使用しますか?

4

0 に答える 0