否则，如果在角度 js 模板中

Else if in angular js template

本文关键字：js 如果 否则      更新时间：2023-09-26

如果在angularjs模板中使用else。语法是什么？例如，在 c 中，我会编写如下代码：

if (data.sender=='system')
{data.receiver}
else if (data.sender=='mail')
{data.receiver} 
else {data.sender}

我的代码：

{{data.sender == 'System' ? data.receiver : ' '}}
{{data.sender =='mail' ? data.receiver : data.sender  }}

{{(data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender}}

您正在寻找的角度模板中没有if-else语法。 模板中的逻辑过多使其难以维护。 以下是两种可能的解决方案：

<span ng-show="data.sender == 'mail' || data.sender=='system'">{{data.receiver}}</span>
<span ng-show="data.sender != 'mail' && data.sender!='system'">{{data.sender}}</span>

您也可以以类似的方式使用 ng-switch：

<span ng-switch="data.sender">
    <span ng-switch-when="mail">{{data.receiver}}</span>
    <span ng-switch-when="system">{{data.receiver}}</span>
    <span ng-switch-default>{{data.sender}}</span>
</span>

后者的优点是文档中只存在一个跨度，而 ng-show/ng-hide 所有跨度都存在于文档中，它们只是使用 display：none 隐藏。

其他选项是编写自己的指令或创建特殊过滤器。

就是这样，但根据经验，您应该尝试避免在模板中使用这种复杂的逻辑。

{{ data.sender == 'system' ? data.receiver : data.sender == 'mail' ? data.receiver : data.sender }}

如果你在角度模板中需要一个elseif，你可以像在C/C++中使用三元运算符

 {{ data.sender=='system'
< 4 ? data.receiver : data.sender=='mail' ? data.receiver : data.sender}}  


angular.module('quetion_app', []);
angular.module('quetion_app').controller('quertion_controller', ['$scope',
  function($scope) {
    $scope.data = {
      sender: 'some sender',
      receiver: 'somebody'
    };
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="quetion_app">
  <div ng-controller="quertion_controller">
    {{data}}
    <br>
    <br>
    {{ data.sender=='system'
    < 4 ? data.receiver : data.sender=='mail' ? data.receiver : data.sender}} </div>
  </div>

更改代码段中的 data.sender 以检查行为

希望对你有帮助

这种类型的逻辑实际上属于负责在$scope中设置数据的控制器或服务。将其放置在视图中会不必要地为视图带来大量逻辑，并且还会导致该逻辑作为手表运行，这既昂贵又不必要。

在建立数据的代码中，您可以拥有：

data.displayedSender = (data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender;

然后在您的视图中绑定到data.displayed发送方：

<span>{{data.displayedSender}}</span>
相关文章：