Я хочу сделать условие в шаблоне 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
. Не знаю, что мне делать для этого условия:
Angularjs (версии ниже 1.1.5) не предоставляет функции if/else
. Ниже приведены несколько вариантов, которые следует учитывать в отношении того, чего вы хотите достичь:
(Перейти к обновлению ниже (# 5), если вы используете версию 1.1.5 или выше)
Как было предложено @Kirk в комментариях, самым чистым способом сделать это было бы использование тройного оператора следующим образом:
<span>{{isLarge ? 'video.large' : 'video.small'}}</span>
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>
ng-hide
/ ng-show
директивы В качестве альтернативы вы также можете использовать ng-show/ng-hide
но с помощью этого на самом деле отобразится как большое видео, так и небольшой элемент видео, а затем скрыть тот, который соответствует условию ng-hide
и ng-show
тот, который соответствует состоянию ng-show
, Таким образом, на каждой странице вы будете показывать два разных элемента.
ng-class
.Это можно использовать следующим образом.
<div ng-class="{large-video: video.large}">
<!-- video block goes here -->
</div>
Вышеупомянутое в основном добавит класс css large-video
в элемент div, если video.large
правдив.
ngIf directive
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>
ng-switch on="video"
вместо ng-switch-on="video"
ng-class="{large-video:video.large}"
согласно документам
В последней версии 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>
ng-if
вводит изолированную область видимости , так что $parent
становится $parent.$parent
в теле ng-if
.
Тернар - самый ясный способ сделать это.
<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
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>
ng-if="someCondition && someOtherCondition"
. Возможно, я неправильно понимаю? (Я написал этот модуль - он должен работать так же, как if
и else
в JS).
Свойство 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>
video.yt$aspectRatio
пусто или не определено? Можно ли применить значение по умолчанию?
В этом случае вы хотите "вычислить" значение пикселя в зависимости от свойства объекта.
Я бы определил функцию в контроллере, которая вычисляет значения пикселей.
В контроллере:
$scope.GetHeight = function(aspect) {
if(bla bla bla) return 270;
return 360;
}
Затем в вашем шаблоне вы просто пишете:
element height="{{ GetHeight(aspect) }}px "
Я согласен, что троянец чрезвычайно чист. Кажется, что это очень ситуативно, хотя как-то мне нужно отображать 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>
<div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>
вы можете использовать директиву ng-if, как указано выше.
Возможность для 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