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>

我已设置a JSfiddle以显示绑定的数据。

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

日志就是这个......

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

或者用简单的英语，如果有来自地址，则显示它，否则显示谁创建了记录，如果有地址，那么也显示。

我已经研究过使用ng-switch但是我想我必须添加额外的标记，如果没有数据则会留下空div。另外，我需要嵌套开关指令，我不确定这是否有效。

有什么想法吗？

更新

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

<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还引入了ternary operator
ng-switch可用于有条件地添加/删除DOM中的元素
另见How do I conditionally apply CSS styles in AngularJS?

原始答案：

这是一个不那么棒的“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>

Fiddle

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

此外，正如我在Google+上提到的，ng-style可能会用于有条件地加载背景图片，如果您想使用ng-show而不是自定义指令。（为了其他读者的利益，Jon在Google+上说：“这两种方法都使用ng-show，我试图避免使用它，因为它使用display：none并在DOM中留下额外的标记。这是本场景中的一个特殊问题，因为隐藏元素将有一个背景图像，仍将在大多数浏览器中加载。“）。
另见How do I conditionally apply CSS styles in AngularJS?

angular-ui ui-if指令监视if条件/表达式的更改。我没有。因此，虽然我的简单实现将在模型更改时正确更新视图，使其仅影响模板输出，但如果条件/表达式答案发生更改，则不会正确更新视图。

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

Answer 2

您可以使用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>

如果您不希望DOM加载空div，则需要使用$ http创建自定义指令以加载（子）模板和$ 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()
      }
   };
});

Answer 3

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

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

AngularJS模板中的条件逻辑

3 个答案: