AngularJS模板中的条件逻辑

Question 1

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

<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，则每一个都将消失。

Question 2

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。

Question 3

您可以使用ngSwitch指令：

  <div ng-switch on="selection" >
    <div ng-switch-when="settings">Settings Div</div>
    <span ng-switch-when="home">Home Span</span>
    <span ng-switch-default>default</span>
  </div>

如果不希望用空的div加载DOM，则需要使用$ http创建自定义指令，以加载（sub）模板，并使用$ compile在达到特定条件时将其注入DOM中。

这只是一个（未经测试的）示例。它可以并且应该被优化：

HTML：

<conditional-template ng-model="element" template-url1="path/to/partial1" template-url2="path/to/partial2"></div>

指示：

app.directive('conditionalTemplate', function($http, $compile) {
   return {
      restrict: 'E',
      require: '^ngModel',
      link: function(sope, element, attrs, ctrl) {
        // get template with $http
        // check model via ctrl.$viewValue
        // compile with $compile
        // replace element with element.replaceWith()
      }
   };
});

Question 4

您可以在循环中的每个div元素上使用ng-show。这就是您想要的：http : //jsfiddle.net/pGwRu/2/吗？

<div class="from" ng-show="message.from">From: {{message.from.name}}</div>