否则如果在 angular js 模板中

Question

我需要在 angularjs 模板中使用 else if。语法是什么？例如，在 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  }}

Answer 1

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

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

Answer 2

如果您需要 angular 模板中的 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 以检查行为

希望对您有所帮助

Answer 3

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

Answer 4

angular 模板中没有您要查找的 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.

隐藏

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

Answer 5

这种类型的逻辑确实属于负责在 $scope 中设置数据的控制器或服务。将它放在您的视图中会给视图带来很多不必要的逻辑，并且还会导致该逻辑成为运行既昂贵又不必要的手表。

在建立数据的代码中你可以有：

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

然后在您看来您绑定到 data.displayed 发件人：

<span>{{data.displayedSender}}</span>

否则如果在 angular js 模板中

Else if in angular js template

javascript

angularjs