在AngularJS模板的条件逻辑 [英] Conditional logic in AngularJS template

问题描述

我有一个角模板，它看起来像这样...

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>

我已经设置了一个的jsfiddle 来显示数据绑定。

我需要做的就是从，到和arrowTo的div显示有条件，根据数据的内容。

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...

• 如果有一个从数据对象，然后显示从分区并绑定数据，但不显示createdBy分区。


• 如果没有从对象，但有那么一个createdBy对象显示createdBy分区并绑定数据。


• 如果有一个为数据对象，然后显示arrowTo分区并绑定它的数据。

或者用简单的英语，如果有一个从地址，表露出来，否则显示谁创造了记录，而不是，如果有一个解决则表明这一点。

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.

我看着使用纳克开关，但我想我必须添加额外的标记，如果没有数据这将留下一个空div。另外我需要巢切换的指令，我不知道这会工作。

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.

任何想法？

更新：

如果我是写我自己的指令（如果我知道如何！），那么这里是一些伪code，以显示我怎么会想用它...

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>

每个部分都会消失，如果函数/ EX pression结果为假。

Each of these would disappear if the function/expression evaluated to false.

推荐答案

角1.1.5推出的 NG-如果指令。这对这个特定问题的最佳解决方案。如果您使用的角度是旧版本，可以考虑使用角UI的的 UI-如果指令。

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:

• 1.1.5也推出了三元操作


• 可以用来有条件地从DOM
添加/删除元素NG-开关

• 也<一见href=\"http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs\">How我有条件地适用于AngularJS CSS样式？

• 1.1.5 also introduced a ternary operator
• ng-switch can be used to conditionally add/remove elements from the DOM
• see also How do I conditionally apply CSS styles in AngularJS?

原来的答复：

下面是一个不那么伟大的NG-IF指令：

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(' ')
            }
        }
    }
});

这允许该HTML语法：

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>

小提琴。

replaceWith（）用于去除从DOM不需要的内容。

replaceWith() is used to remove unneeded content from the DOM.

另外，我在Google+上所提到的， NG式大概可以用于有条件地加载背景图像，你应该要使用NG-节目，而不是一个自定义的指令。 （对于其他读者的利益，乔恩在Google+上表示：这两种方法都使用NG-显示哪些我试图避免，因为它使用显示：无，叶额外的标记在DOM这是在这种情况下，因为一个特殊的问题隐藏的元件将具有将仍然在大多数浏览器中加载一个背景图像）。结果参见<一个href=\"http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs\">How我有条件地适用于AngularJS CSS样式？

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?

借助角的UI用户界面，如果指令手表改变，如果条件/ EX pression。矿井没有。所以，虽然我简单的实现将正确地更新视图，如果模型的变化，使得它仅影响模板输出，将无法正常更新视图如果条件/ EX pression答案的变化。

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.

如，如果在模型中from.name的值发生变化，该​​视图将更新。但是，如果你删除$ scope.data.messages [0]。从，发件人的名字会从视图中删除，但模板不会从视图中去除，因为如果该条件/ EX pression不被关注。

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屋！