оператор if else в шаблонах AngularJS

Я хочу сделать условие в шаблоне AngularJS. Я получаю список видео из API Youtube. Некоторые из видео в соотношение 16:9 и 4:3 соотношение.

Я хочу сделать такое условие:

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

Я повторяю видео с помощью ng-repeat. Понятия не имею, что мне делать для этого условия:

  • добавить функцию в области?
  • сделать это в шаблоне?
648
angularjs if-statement

9 ответов

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:

в версиях выше 1.1.5 вы можете использовать

1201

в последней версии 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>
166

троичный-самый ясный способ сделать это.

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

угловой сам по себе не обеспечивает функциональность 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>
41

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

ваш фильтр будет выглядеть так:

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

и шаблон будет:

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

в этом случае нужно "вычислить" значение пикселя в зависимости от объекта недвижимости.

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

в контроллере:


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

тогда в вашем шаблоне вы просто напишите:


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

Я согласен, что троица чрезвычайно чиста. Кажется, что это очень ситуативно, хотя как - то мне нужно отобразить div или p или таблицу , поэтому с таблицей я не предпочитаю Троицу по очевидным причинам. Вызов функции обычно идеален, или в моем случае я сделал это:

<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>
8
    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

вы можете использовать директиву ng-if, как указано выше.

3

возможность для углового: Я должен был включить 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';
      }
  }

С наилучшими пожеланиями,

января

1