якщо інше оператор у шаблонах AngularJS

Я хочу зробити умову в шаблоні AngularJS. Я отримую список відео з API API. Деякі відео мають співвідношення 16: 9, а деякі - у співвідношенні 4: 3.

Я хочу зробити такий стан таким:

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

Я повторюю відео за допомогою ng-repeat. Поняття не маю, що мені робити для цієї умови:

• Додати функцію в область застосування?
• Робити це в шаблоні?

Angularjs (версії нижче 1.1.5) не забезпечує if/elseфункціональність. Нижче наведено кілька варіантів розгляду того, чого ви хочете досягти:

( Перейдіть до оновлення нижче (№5), якщо ви використовуєте версію 1.1.5 або новішу )

1. Термінальний оператор:

Як запропонував @Kirk у коментарях, найчистішим способом цього було б використання потрійного оператора наступним чином:

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

2. ng-switchдиректива:

можна використовувати щось на зразок наступного.

<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-showдирективи

Крім того, ви можете також використовувати, ng-show/ng-hideале використовуючи це, фактично буде відображатися як велике відео, так і малий відеоелемент, а потім приховати той, який відповідає ng-hideумові, і показує той, що відповідає ng-showумові. Тож на кожній сторінці ви насправді будете відображати два різні елементи.

4. Ще одним варіантом розгляду є ng-classдиректива.

Це можна використовувати наступним чином.

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

Вищезазначене в основному додасть large-videoклас css елементу div, якщо він video.largeє truthy.

ОНОВЛЕННЯ: Кутовий 1.1.5 введеноngIf directive

5. ng-ifдиректива:

У наведених вище версіях 1.1.5ви можете використовувати ng-ifдирективу. Це видалило б елемент, якщо наданий вираз повернеться falseі повторно вставить elementв DOM, якщо вираз повернеться true. Можна використовувати наступним чином.

<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 (станом на 1.1.5) вони включили умовну директиву під назвою ngIf. Він відрізняється від ngShowта ngHideтим, що елементи не приховані, але взагалі не включені до DOM. Вони дуже корисні для компонентів, які дорого створюються, але не використовуються:

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

Трінар - це найясніший спосіб зробити це.

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

Кутовий сам по собі не забезпечує функцію if / else, але ви можете отримати його, включивши цей модуль:

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

За його власними словами, це просто "проста колекція директив потоків управління: ng-if, ng-else-if і ng-else". Це простий та інтуїтивний у використанні.

Приклад:

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

Ви можете використовувати своє video.yt$aspectRatio ресурс безпосередньо, пропустивши його через фільтр і прив’язавши результат до атрибута висоти у вашому шаблоні.

Ваш фільтр виглядатиме приблизно так:

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

І шаблон був би:

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

У цьому випадку потрібно "обчислити" значення пікселя залежно від властивості об'єкта.

Я б визначив функцію в контролері, який обчислює значення пікселів.

У контролері:

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

Потім у своєму шаблоні ви просто напишете:

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

Я згоден, що трійник надзвичайно чистий. Здається, що це дуже ситуативно, хоча в якості чогось мені потрібно відобразити div або p або table, тож із таблицею я не віддаю перевагу потрійному з зрозумілих причин. Здійснення дзвінка до функції, як правило, ідеально, або в моєму випадку я це зробив:

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

ви можете використовувати директиву ng-if, як описано вище.

Можливість для Angular: мені довелося включити вираз if - в html-частину, я повинен був перевірити, чи визначені всі змінні URL-адреси, яку я створюю, визначені. Я зробив це наступним чином і, здається, це гнучкий підхід. Я сподіваюся, що комусь це буде корисно.

Частина html у шаблоні:

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

І частина машинопису:

  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';
      }
  }

Дякую і всього найкращого,

Січ

ng Якщо інше твердження

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