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

648

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

Я хочу сделать следующее:

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

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

  • Добавить функцию в область видимости?
  • Сделайте это в шаблоне?
  • 2
    Я нашел одну статью нг-если здесь. goo.gl/wQ30uf
Теги:
if-statement

9 ответов

1261
Лучший ответ

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 тот, который соответствует состоянию ng-show, Таким образом, на каждой странице вы будете показывать два разных элемента.

4. Другим вариантом для рассмотрения является директива ng-class.

Это можно использовать следующим образом.

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

Вышеупомянутое в основном добавит класс css large-video в элемент div, если video.large правдив.

ОБНОВЛЕНИЕ: Угловой 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>
  • 9
    Должно быть ng-switch on="video" вместо ng-switch-on="video"
  • 0
    3-й вариант должен быть ng-class="{large-video:video.large}" согласно документам
Показать ещё 11 комментариев
174

В последней версии 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>
  • 4
    Имейте в виду, что ng-if вводит изолированную область видимости , так что $parent становится $parent.$parent в теле ng-if .
139

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

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
  • 0
    Хо, чтобы сделать это с 2 условия в или ?? как <div> {{A == B || A == C? 'varIsTrue': 'varIsFalse'}} </ div>
  • 2
    Оберните это (A == B || A == C)
Показать ещё 2 комментария
39

Angular сам не предоставляет функциональность 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>
  • 1
    я не хочу повторять код в div снова и снова.
  • 1
    Вам не нужно ничего повторять - вы можете так же легко сделать ng-if="someCondition && someOtherCondition" . Возможно, я неправильно понимаю? (Я написал этот модуль - он должен работать так же, как if и else в JS).
Показать ещё 2 комментария
25

Свойство 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>
  • 0
    Как насчет вашего кода, когда video.yt$aspectRatio пусто или не определено? Можно ли применить значение по умолчанию?
10

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

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

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


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

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


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

8

Я согласен, что троянец чрезвычайно чист. Кажется, что это очень ситуативно, хотя как-то мне нужно отображать 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>
3
    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

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

1

Возможность для Angular: Я должен был включить if-statement в html-часть, мне пришлось проверить, определены ли все переменные URL-адреса, которые я создаю. Я сделал это следующим образом и, похоже, это гибкий подход. Я надеюсь, что это будет полезно для кого-то.

Часть html в шаблоне:

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

И часть typescript:

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

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

Jan

  • 2
    Больше похоже на Angular, чем AngularJS.
  • 0
    @pzaenger, да, но многие ответы на этот вопрос работают для обоих, поэтому я думаю, что некоторые люди, как и я, все равно смотрят на ответы. Пожалуйста, дайте мне знать, если вы не возражаете.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню