AngularJS模板中的if else语句

作者: 撩心
发布时间: 2024-08-06 03:21:17 (1月前)
转自：

8 条回复

0#
回复此人
一腔诗意 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Angularjs（1.1.5以下版本）不提供 <code> if/else </code> 功能。以下是您要实现的目标的几个选项： </p> <P> （的<strong> <EM> 如果您使用的是1.1.5或更高版本，请跳至下面的更新（＃5） </EM> </强> ） </p> <H3> 1.三元运营商： </H3> <P> 正如@Kirk在评论中所建议的那样，最简单的方法是使用三元运算符，如下所示： </p> <pre> <code> <span>{{isLarge ? 'video.large' : 'video.small'}}</span> </code> </pre> <H3> 2。 <a href="https://docs.angularjs.org/api/ng/directive/ngSwitch" rel="noreferrer"> <code> ng-switch </code> </A> 指示： </H3> <P> 可以使用类似以下的东西。 </p> <pre> <code> <div ng-switch on="video"> <div ng-switch-when="video.large">  </div> <div ng-switch-default>  </div> </div> </code> </pre> <H3> 3。 <a href="https://docs.angularjs.org/api/ng/directive/ngHide" rel="noreferrer"> <code> ng-hide </code> </A> / <a href="https://docs.angularjs.org/api/ng/directive/ngShow" rel="noreferrer"> <code> ng-show </code> </A> 指令 </H3> <P> 或者，您也可以使用 <code> ng-show/ng-hide </code> 但使用它实际上会渲染一个大视频和一个小视频元素，然后隐藏符合的视频元素 <code> ng-hide </code> 条件并显示遇到的那个 <code> ng-show </code> 条件。因此，在每个页面上，您实际上将呈现两个不同的元素。 </p> <H3> 4.另一个需要考虑的选择是 <a href="https://docs.angularjs.org/api/ng/directive/ngClass" rel="noreferrer"> <code> ng-class </code> </A> 指示。 </H3> <P> 这可以如下使用。 </p> <pre> <code> <div ng-class="{large-video: video.large}">  </div> </code> </pre> <P> 以上基本上都会添加一个 <code> large-video </code> css类为div元素if <code> video.large </code> 是真的。 </p> <H3> 更新： <a href="http://code.angularjs.org/1.1.5/docs/" rel="noreferrer"> Angular 1.1.5 </A> 介绍了 <a href="https://docs.angularjs.org/api/ng/directive/ngIf" rel="noreferrer"> <code> ngIf directive </code> </A> </H3> <H3> 5。 <a href="https://docs.angularjs.org/api/ng/directive/ngIf" rel="noreferrer"> <code> ng-if </code> </A> 指示： </H3> <P> 在上面的版本中 <code> 1.1.5 </code> 你可以使用 <code> ng-if </code> 指示。如果提供的表达式返回，这将删除元素 <code> false </code> 并重新插入 <code> element </code> 在表达式返回的DOM中 <code> true </code> 。可以如下使用。 </p> <pre> <code> <div ng-if="video == video.large">  </div> <div ng-if="video != video.large">  </div> </code> </pre> </DIV>

编辑
1#
回复此人
清月 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以使用你的 <code> video.yt$aspectRatio </code> 直接通过过滤器传递属性，并将结果绑定到模板中的height属性。 </p> <P> 您的过滤器看起来像： </p> <pre> <code> app.filter('videoHeight', function () { return function (input) { if (input === 'widescreen') { return '270px'; } else { return '360px'; } }; }); </code> </pre> <P> 模板将是： </p> <pre> <code> <video height={{video.yt$aspectRatio | videoHeight}}></video> </code> </pre> </DIV>

编辑
2#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我同意三元非常干净。似乎它是非常情境化的，虽然我需要显示div或p或table，所以使用表格我不喜欢三元组，原因很明显。调用函数通常是理想的，或者在我的情况下，我这样做： </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
3#
回复此人
无语 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Angular本身不提供if / else功能，但您可以通过包含此模块来获取它： </p> <P> <a href="https://github.com/zachsnow/ng-elif"> https://github.com/zachsnow/ng-elif </A> </p> <P> 用它自己的话来说，它只是“一个简单的控制流指令集合：ng-if，ng-else-if和ng-else。”它使用起来简单直观。 </p> <P> 例： </p> <pre> <code> <div ng-if="someCondition"> ... </div> <div ng-else-if="someOtherCondition"> ... </div> <div ng-else> ... </div> </code> </pre> </DIV>

编辑
4#
回复此人
解天 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div> </code> </pre> <P> 您可以使用上面的ng-if指令。 </p> </DIV>

编辑
5#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Angular的可能性：我必须在html部分包含一个if语句，我必须检查我生成的URL的所有变量是否都已定义。我是通过以下方式完成的，它似乎是一种灵活的方法。我希望它会对某些人有所帮助。 </p> <P> 模板中的html部分： </p> <pre> <code> <div *ngFor="let p of poemsInGrid; let i = index" > <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active"> </div> </code> </pre> <P> 打字稿部分： </p> <pre> <code> 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'; } } </code> </pre> <P> 谢谢和最好的问候， </p> <P> 一月 </p> </DIV>

编辑
6#
回复此人
楊♡ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 三元是最明确的做法。 </p> <pre> <code> <div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div> </code> </pre> </DIV>

编辑

登录后才能参与评论