AngularJS/HTML/CSS - さまざまなリンクボタンとURLリンクを表示するスライドショー

Question

たとえば、4つの画像を持つスライドショーの作成を試しています。そして、私は、各画像のための独自のURLリンクを持つリンクボタンを作成したいです。しかし、私がやったのは、スライドショーに表示される4つのリンクボタンで、それぞれの画像とともに変化する1つのリンクボタンと、独自のURLリンクで作成されています。

{% if settings.show_block_lookbook %} 
 
<div id="lookbook-section" class="section-full lookbook-section"> 
 

 
    <div class="lookbook-wrapper"> 
 
    <div class="lookbook-text"> 
 
     <div class="lookbook-container"> 
 
     <div class="container"> 
 

 
      <div class="lb-text"> 
 
      {% assign lbText1 = settings.block_lookbook_text_1 %} 
 
      {% assign lbText2 = settings.block_lookbook_text_2 %} 
 
      {% assign lbText3 = settings.block_lookbook_text_3 %} 
 
      {% assign lbText4-1 = settings.block_lookbook_text_4_1 %} 
 
      {% assign lbText4-2 = settings.block_lookbook_text_4_2 %} 
 
      {% assign lbText4-3 = settings.block_lookbook_text_4_3 %} 
 
      {% assign lbText4-4 = settings.block_lookbook_text_4_4 %} 
 
      {% assign lbLink-1 = settings.block_lookbook_link_1 %} 
 
      {% assign lbLink-2 = settings.block_lookbook_link_2 %} 
 
      {% assign lbLink-3 = settings.block_lookbook_link_3 %} 
 
      {% assign lbLink-4 = settings.block_lookbook_link_4 %} 
 

 
      {% if lbText1 != blank %}<h3>{{ lbText1}}</h3>{% endif %} 
 

 
      <div class="bg-slider-arrows"> 
 
       <span class="button-prev no-border"></span> 
 
       <span class="button-next no-border"></span> 
 
      </div> 
 

 
      {% if lbText2 != blank %}<h2>{{ lbText2 }}</h2>{% endif %} 
 

 
      {% if lbText3 != blank %}<p>{{ lbText3 }}</p>{% endif %} 
 

 
      {% if lbText4-1 != blank %}<a href="{{ lbLink-1 }}" class="btn btn-custom btn-lb">{{ lbText4-1 }}</a>{% endif %} 
 
      {% if lbText4-2 != blank %}<a href="{{ lbLink-2 }}" class="btn btn-custom btn-lb">{{ lbText4-2 }}</a>{% endif %} 
 
      {% if lbText4-3 != blank %}<a href="{{ lbLink-3 }}" class="btn btn-custom btn-lb">{{ lbText4-3 }}</a>{% endif %} 
 
      {% if lbText4-4 != blank %}<a href="{{ lbLink-4 }}" class="btn btn-custom btn-lb">{{ lbText4-4 }}</a>{% endif %} 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="lookbook-bg"> 
 
    {% for i in (1..4) %} 
 
     {% assign newShow = 'block_lookbook_img_' | append: i %} 
 

 
     {% if settings[newShow] %} 
 
     {% assign newImage = 'block_lookbook_img_' | append: i %} 
 

 
     <div class="lookbook-item"> 
 
      <img src = "{{ newImage | append: '.jpg' | asset_url}}" alt="" /> 
 
     </div> 
 

 
     {% endif %} 
 

 
    {% endfor %} 
 
    </div> 
 

 
</div> 
 
{% endif %}

私は非常に非常に新しい本にしていますように私は完全に、何をするかのよう失っています。私はどうにかしてURLやリンクボタンなどで画像をリンクする必要があると思うだろうが、各画像に独自のリンクボタンとURLリンクがあるようにどのようにコードするのか分からない...助け？どんな例？

Answer 1

お待ちください、ここでは角度の大部分を使用していません。私はそのdjangoまたはいくつかの他のテンプレートと考えて{% if %}。

使用のようなもの：純粋なHTMLと `NG-switch`を使用しないのはなぜuが必要な機能については

見 try this link for ng-repeat

については

<div ng-repeat="object in objects"> 
    <a href="{{ object.link }}" class="btn btn-custom btn-lb">{{object.name }}</a> 
    <img src="{{ object.img_path}}" /> 
</div> 

、私はcleaner approach of Carousel