AngularJS模板中的条件逻辑

Question

我有一个看起来像这样的有角模板…

<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来显示绑定的数据。

我需要做的是根据数据内容有条件地显示“ from”，“ to”和“ arrowTo” div。

日志是这个…

• 如果数据中存在“ from”对象，则显示“ from” div并绑定数据，但不显示“ createdBy” div。
• 如果没有“来自”对象，但是有“ createdBy”对象，则显示“ createdBy” div并绑定数据。
• 如果数据中有一个“ to”对象，则显示“ arrowTo” div并将其绑定。

或用简单的英语显示，如果有一个发自地址，则显示它，否则，显示由谁创建记录，如果有一个至地址，则也显示该地址。

我已经研究过使用ng-switch，但是我想我必须添加额外的标记，如果没有数据，它将留下一个空的div。另外，我需要嵌套switch指令，但不确定是否可行。

有任何想法吗？

更新：

如果我要编写自己的指令（如果我知道怎么做！），那么这里有一些伪代码来说明我将如何使用它……

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

如果函数/表达式评估为false，则每一个都将消失。

Answer 1

Angular 1.1.5引入了ng-if指令。这是针对此特定问题的最佳解决方案。如果您使用的是Angular的旧版本，请考虑使用angular-
ui的ui-if指令。

如果您是在这里寻找“模板中的条件逻辑”这一一般问题的答案，请考虑：

• 1.1.5还引入了三元运算符
• ng-switch可用于有条件地从DOM中添加/删除元素
• 另请参阅如何在AngularJS中有条件地应用CSS样式？

原始答案：

这是一个不太好的“ ng-if”指令：

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语法：

<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中删除不需要的内容。

另外，正如我在Google+上提到的那样，如果您想使用ng-show而不是自定义指令，则ng-
style
可能可以有条件地加载背景图片。（为了其他读者的利益，Jon在Google+上说：“两种方法都使用ng-
show，我想避免这种方法，因为它使用display：none并在DOM中留下了额外的标记。在这种情况下，这是一个特殊的问题，因为隐藏的元素将具有背景图片，该图片仍将在大多数浏览器中加载。”）。
另请参阅如何在AngularJS中有条件地应用CSS样式？

的角度的UI的UI-如果指令手表更改如果条件/表达。我的不是。因此，虽然我的简单实现可以在模型发生更改时正确地更新视图，从而仅影响模板输出，但是如果条件/表达式答案发生更改，它将无法正确地更新视图。

例如，如果模型中from.name的值更改，则视图将更新。但是，如果delete $scope.data.messages[0].from使用from，则将从视图中删除from名称，但不会从视图中删除模板，因为不会监视if-condition / expression。