Question

我需要在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  }}

Answer 1

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

Answer 2

您正在寻找角度模板中没有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 3

就是这样，但你应该尽量避免在模板中使用这种复杂的逻辑，这是一条经验法则。

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

Answer 4

如果你需要在角度模板中使用 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 5

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

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

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

然后在您的视图中，您绑定到data.displayed发件人：

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

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

5 个答案: