AngularJS bir şablonda bir durum yapmak istiyorum. Youtube API video bir listesini getir. Videoları 16:9 oranında ve bazı 4:3 oranı vardır.

Böyle bir durumu yapmak istiyorum:

if video.yt$aspectRatio equals widescreen then 
    element's attr height="270px"
else
    element's attr height="360px"

Videolar ng-repeat kullanarak yineleme ediyorum. Hiç bilmiyorum bu durum için ne yapmalıyım: var

• Bu kapsamda bir fonksiyon Ekle?
• Şablonda?

Angularjs (1.1.5 aşağıda sürümleri) if/else işlevsellik sağlamaz . Aşağıda ne elde etmek istediğinizi düşünün için birkaç seçenek:

(Eğer sürüm 1.1.5 veya daha büyük kullanıyorsanız bu güncelleme aşağıda (#4) atlamak)

1. ng-switch Direktif:

kullanılabilir bir şey aşağıdaki gibi.

<div ng-switch on="video">
    <div ng-switch-when="video.large">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

2. ng-hide / ng-show direktifleri

Alternatif olarak, belki de kullanın ng-show/ng-hide ama kullanarak bu aslında render hem de büyük bir video ve bir küçük video element ve sonra gizle tek karşılayan ng-hide durumu gösterir ve tek karşılayan ng-show durumu. Her sayfada aslında iki farklı element render olacak.

3. Göz önünde başka bir seçenek ng-class Yönerge.

Bu aşağıdaki gibi kullanılabilir.

<div ng-class="{large-video: video.large}">
    <!-- video block goes here -->
</div>

Yukarıda temel olarak, eğer video.large truthy ise dıv öğe large-video css sınıfı ekler.

GÜNCELLEME: Angular 1.1.5 ngIf directive . tanıttı

4. ng-if Direktif:

1.1.5 yukarıda sürümleri ng-if yönergeyi kullanabilirsiniz. Bu eğer ifade verirse ifadesi true döndürür false ve yeniden ekler DOM element dönerse eleman çıkarıyoruz. Olarak kullanılabilir izler.

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>