AngularJS模板中的条件逻辑

Conditional logic in AngularJS template

本文关键字：条件逻辑 AngularJS      更新时间：2023-09-26

我有一个angular模板，看起来像这样…

<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"answers"arrowTo"div根据数据的内容有条件地显示。

日志是这样的

  • 如果数据中有"from"对象，则显示"from"div并绑定数据，但不显示"createdBy"div。
  • 如果没有"from"对象，但有"createdBy"对象，则显示"createdBy"div并绑定数据。
  • 如果数据中有一个"to"对象，那么显示"arrowTo"div并绑定它的数据。

或者简单地说，如果有from地址，显示它，否则显示谁创建了记录，如果有to地址，也显示它。

我已经研究过使用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，则这些都将消失。

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-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条件/表达式没有被监视。

你可以使用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来加载(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()
      }
   };
});

可以对循环中的每个div元素使用ng-show。这是你想要的吗:http://jsfiddle.net/pGwRu/2/?

<div class="from" ng-show="message.from">From: {{message.from.name}}</div>
相关文章：