AngularJS 模板中的条件逻辑
[英] Conditional logic in AngularJS template
本文介绍了AngularJS 模板中的条件逻辑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个看起来像这样的角度模板...
<div class="信息"><div class="type"></div><div class="from">From Avatar</div><div class="createdBy">由头像创建</div><div class="arrowTo"><div class="箭头"></div><div class="to">到头像</div>
<div class="日期"><div class="day">25</div><div class="month">Dec</div>
<div class="main"><div class="内容"><div class="heading2">{{message.title}}</div><div ng-bind-html="message.content"></div>
<br/><小时/><br/>
我已经设置了 a JSfiddle 来显示绑定的数据.
我需要做的是根据数据的内容有条件地显示from"、to"和arrowTo"div.
日志是这样的...
- 如果数据中有from"对象，则显示from"div并绑定数据，但不显示createdBy"div.
- 如果没有from"对象但有createdBy"对象，则显示createdBy"div并绑定数据.
- 如果数据中有to"对象，则显示arrowTo"div并绑定它的数据.
或者用简单的英语，如果有发件人地址，则显示它，否则显示创建记录的人，如果有收件人地址，则也显示.
我已经研究过使用 ng-switch，但我认为我必须添加额外的标记，如果没有数据，它会留下一个空的 div.另外，我需要嵌套 switch 指令，但我不确定这是否可行.
有什么想法吗?
更新:
如果我要编写自己的指令(如果我知道怎么做！)那么这里有一些伪代码来展示我想如何使用它...
从模板到这里
<div ng-if="showCreatedBy()">CreatedBy 模板在这里
<div ng-if="showTo()">模板到这里
如果函数/表达式的计算结果为假，这些都会消失.
解决方案
Angular 1.1.5 引入了 ng-if 指令.这是解决此特定问题的最佳解决方案.如果您使用的是旧版本的 Angular，请考虑使用 angular-ui 的 ui-if 指令.
如果您来到这里寻找模板中的条件逻辑"这一一般问题的答案，还请考虑:
<小时>原答案:
这是一个不太好的ng-if"指令:
myApp.directive('ngIf', function() {返回 {链接:函数(范围，元素，属性){if(scope.$eval(attrs.ngIf)) {//删除 '<div ng-if...></div>'element.replaceWith(element.children())} 别的 {element.replaceWith(' ')}}}});
允许使用这种 HTML 语法:
<小时><div ng-if="showFrom(message)"><div>发件人:{{message.from.name}}</div>
<div ng-if="showCreatedBy(message)"><div>创建者:{{message.createdBy.name}}</div>
<div ng-if="showTo(message)"><div>收件人:{{message.to.name}}</div>
小提琴.
replaceWith() 用于从 DOM 中删除不需要的内容.
另外，正如我在 Google+ 上提到的，ng-style 可能是用于有条件地加载背景图像，如果您想使用 ng-show 而不是自定义指令.(为了其他读者的利益，Jon 在 Google+ 上说:这两种方法都使用 ng-show，我试图避免它，因为它使用 display:none 并在 DOM 中留下额外的标记.这是这种情况下的一个特殊问题，因为隐藏元素将具有背景图像，该图像仍将在大多数浏览器中加载.").
另见 如何在 AngularJS 中有条件地应用 CSS 样式?
angular-ui ui-if 指令监视 if 条件/表达式的变化.我的没有.因此，虽然我的简单实现会在模型发生变化时正确更新视图，从而仅影响模板输出，但如果条件/表达式答案发生变化，则不会正确更新视图.
例如，如果模型中 from.name 的值发生变化，视图将更新.但是如果你delete $scope.data.messages[0].from，from 名称将从视图中移除，但模板不会从视图中移除，因为 if-condition/expression没有被监视.
I have an angular template which looks like this...
<div ng-repeat="message in data.messages" ng-class="message.type">
<div class="info">
<div class="type"></div>
<div class="from">From Avatar</div>
<div class="createdBy">Created By Avatar</div>
<div class="arrowTo">
<div class="arrow"></div>
<div class="to">To Avatar</div>
</div>
<div class="date">
<div class="day">25</div>
<div class="month">Dec</div>
</div>
</div>
<div class="main">
<div class="content">
<div class="heading2">{{message.title}}</div>
<div ng-bind-html="message.content"></div>
</div>
</div>
<br />
<hr />
<br />
</div>
I have set up a JSfiddle to show the data being bound.
What I need to do is make the "from", "to" and "arrowTo" divs show conditionally, depending on the content of the data.
The log is is this...
- If there is a "from" object in the data then show the "from" div and bind the data but don't show the "createdBy" div .
- If there is no "from" object but there is a "createdBy" object then show the "createdBy" div and bind the data.
- If there is a "to" object in the data then show the "arrowTo" div and bind it's data.
Or in plain English, if there is a from address, show it, otherwise show who created the record instead and if there is a to address then show that too.
I have looked into using ng-switch but I think I'd have to add extra markup which would leave an empty div if there was no data. Plus I'd need to nest switch directives and I'm not sure if that would work.
Any ideas?
UPDATE:
If I were to write my own directive (If I knew how!) then here is some pseudo code to show how I would want to use it...
<div ng-if="showFrom()">
From Template Goes Here
</div>
<div ng-if="showCreatedBy()">
CreatedBy Template Goes Here
</div>
<div ng-if="showTo()">
To Template Goes Here
</div>
Each of these would disappear if the function/expression evaluated to false.
解决方案
Angular 1.1.5 introduced the ng-if directive. That's the best solution for this particular problem. If you are using an older version of Angular, consider using angular-ui's ui-if directive.
If you arrived here looking for answers to the general question of "conditional logic in templates" also consider:
Original answer:
Here is a not-so-great "ng-if" directive:
myApp.directive('ngIf', function() {
return {
link: function(scope, element, attrs) {
if(scope.$eval(attrs.ngIf)) {
// remove '<div ng-if...></div>'
element.replaceWith(element.children())
} else {
element.replaceWith(' ')
}
}
}
});
that allows for this HTML syntax:
<div ng-repeat="message in data.messages" ng-class="message.type">
<hr>
<div ng-if="showFrom(message)">
<div>From: {{message.from.name}}</div>
</div>
<div ng-if="showCreatedBy(message)">
<div>Created by: {{message.createdBy.name}}</div>
</div>
<div ng-if="showTo(message)">
<div>To: {{message.to.name}}</div>
</div>
</div>
Fiddle.
replaceWith() is used to remove unneeded content from the DOM.
Also, as I mentioned on Google+, ng-style can probably be used to conditionally load background images, should you want to use ng-show instead of a custom directive. (For the benefit of other readers, Jon stated on Google+: "both methods use ng-show which I'm trying to avoid because it uses display:none and leaves extra markup in the DOM. This is a particular problem in this scenario because the hidden element will have a background image which will still be loaded in most browsers.").
See also How do I conditionally apply CSS styles in AngularJS?
The angular-ui ui-if directive watches for changes to the if condition/expression. Mine doesn't. So, while my simple implementation will update the view correctly if the model changes such that it only affects the template output, it won't update the view correctly if the condition/expression answer changes.
E.g., if the value of a from.name changes in the model, the view will update. But if you delete $scope.data.messages[0].from, the from name will be removed from the view, but the template will not be removed from the view because the if-condition/expression is not being watched.
这篇关于AngularJS 模板中的条件逻辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
