我想在AngularJS模板中创建一个条件。我从Youtube 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迭代视频。对于这种情况，我不知道该怎么做:
在作用域中添加函数? 它在模板?
当前回答
<div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>
你可以像上面一样使用ng-if指令。
其他回答
在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>
Angularjs(低于1.1.5的版本)不提供if/else功能。下面是一些你想要达到的目标的选择:
(如果您使用的是1.1.5或更高版本，则跳转到下面的更新(#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>
上面的代码基本上会在div元素if video中添加一个大的video css类。大就是真理。
更新:Angular 1.1.5引入了ngIf指令
5. ng-if指令:
在1.1.5以上的版本中，你可以使用ng-if指令。如果提供的表达式返回false，则删除元素;如果表达式返回true，则将元素重新插入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>
Angular的一个可能性是: 我必须在html部分中包含一个if -语句，我必须检查我产生的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
你可以用你的视频。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>
三元是最明确的方法。
<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
