оператор 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
. Понятия не имею, что мне делать для этого условия:
- добавить функцию в области?
- сделать это в шаблоне?
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
вы можете использовать
в последней версии 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>
угловой сам по себе не обеспечивает функциональность 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
свойство непосредственно путем передачи его через фильтр и привязки результата к атрибуту height в вашем шаблоне.
ваш фильтр будет выглядеть так:
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 или таблицу , поэтому с таблицей я не предпочитаю Троицу по очевидным причинам. Вызов функции обычно идеален, или в моем случае я сделал это:
<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, как указано выше.
возможность для углового: Я должен был включить 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';
}
}
С наилучшими пожеланиями,
января