AngularJS şablonlarındaki if deyimi

AngularJS şablonunda bir koşul yapmak istiyorum. Youtube API'sından bir video listesi getiriyorum. Videoların bazıları 16: 9 oranında, bazıları 4: 3 oranında.

Ben böyle bir koşul yapmak istiyorum:

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

Videoları kullanarak tekrar ediyorum ng-repeat. Bu durum için ne yapmalıyım hakkında hiçbir fikrim yok:

• Kapsamda bir işlev eklensin mi?
• Şablonda mı?

Angularjs (1.1.5'in altındaki sürümler) if/elseişlevsellik sağlamaz . Aşağıda, başarmak istediğiniz şey için göz önünde bulundurmanız gereken birkaç seçenek vardır:

( 1.1.5 veya daha üst bir sürümünü kullanıyorsanız aşağıdaki güncellemeye atlayın (# 5) )

1. Üçlü operatör:

@Kirk tarafından yorumlarda önerildiği gibi, bunu yapmanın en temiz yolu üçlü bir operatör kullanmaktır:

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2. ng-switchyönerge:

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

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

3. ng-hide/ ng-showyönergeler

Alternatif olarak, kullanabilirsiniz, ng-show/ng-hideancak bunu kullanmak aslında hem büyük bir videoyu hem de küçük bir video öğesini oluşturur ve ardındanng-hide koşulu koşulung-show . Yani her sayfada aslında iki farklı öğe oluşturacaksınız.

4. Dikkate alınması gereken başka bir seçenek ng-class direktiftir.

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

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

Yukarıdaki temel large-videoolarak div öğesine bir css sınıfı ekleyecektir.video.large olarak doğruysa ekleyecektir.

GÜNCELLEME: Açısal 1.1.5 ,ngIf directive

5. ng-if yönerge:

Yukarıdaki versiyonlarda direktifi 1.1.5kullanabilirsiniz ng-if. Bu, sağlanan ifade döndürülürse falseve elementifade döndürülürse DOM içine yeniden eklenirse öğeyi kaldırır true. Aşağıdaki gibi kullanılabilir.

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

Angular'ın en son sürümünde (1.1.5 itibariyle), adlı bir koşullu yönerge eklediler ngIf. Öğelerden farklıdır ngShowve ngHideiçinde öğeler gizlenmez, ancak DOM'a hiç dahil edilmez. Oluşturulması pahalı olan ancak kullanılmayan bileşenler için çok kullanışlıdır:

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

Üçlü bunu yapmanın en açık yoludur.

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>

Açısal, if / else işlevselliğini sağlamaz, ancak bu modülü ekleyerek alabilirsiniz:

https://github.com/zachsnow/ng-elif

Kendi deyimiyle, bu sadece "kontrol akış direktiflerinin basit bir derlemesi: ng-if, ng-else-if ve ng-else." Kullanımı kolay ve sezgisel.

Misal:

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>

Kullanabilirsiniz video.yt$aspectRatio Şablonunuzdaki height özelliğinde sonucu bir filtre geçirilerek ve bağlanarak doğrudan tesisle.

Filtreniz şuna benzer:

app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

Ve şablon şöyle olurdu:

<video height={{video.yt$aspectRatio | videoHeight}}></video>

Bu durumda, bir nesne özelliğine bağlı olarak bir piksel değerini "hesaplamak" istersiniz.

Denetleyicide piksel değerlerini hesaplayan bir işlev tanımlarım.

Denetleyicide:

$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

Ardından şablonunuza şunları yazmanız yeterlidir:

element height="{{ GetHeight(aspect) }}px "

Bir üçlü son derece temiz olduğunu kabul ediyorum . Div veya p veya tabloyu görüntülemem gereken bir şey olsa da çok durumsal görünüyor, bu yüzden bir tabloyla bariz nedenlerden dolayı bir üçlü tercih etmiyorum. Bir işlevi çağırmak genellikle idealdir veya benim durumumda bunu yaptım:

<div ng-controller="TopNavCtrl">
        <div ng-if="info.host ==='servername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
       <div ng-if="info.host ==='otherservername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
</div>

    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

yukarıdaki gibi ng-if yönergesini kullanabilirsiniz.

Açısal bir olasılık: html bölümüne bir if - ifadesi eklemek zorunda kaldım, ürettiğim bir URL'nin tüm değişkenlerinin tanımlanıp tanımlanmadığını kontrol etmek zorunda kaldım. Bunu şu şekilde yaptım ve esnek bir yaklaşım gibi görünüyor. Umarım birisi için faydalı olur.

Şablondaki html bölümü:

    <div  *ngFor="let p of poemsInGrid; let i = index" >
        <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
    </div>

Ve daktilo bölümü:

  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

Teşekkür ve saygılarımla,

Ocak

ng else ifadesi

ng-if="receiptData.cart == undefined ? close(): '' ;"