关于javascript： angular JS 中的if语句

Else if in angular js template

本问题已经有最佳答案，请猛点这里访问。

我需要在AngularJS模板中使用else if。语法是什么？例如，在C中，我将编写如下代码：

1
2
3
4
5

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

我的代码：

1
2
3

相关讨论

在角度模板中没有您要查找的if-else语法。模板中的逻辑太多，很难维护。以下是两种可能的解决方案：

1 2	<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开关：

1
2
3
4
5

{{data.receiver}}
{{data.receiver}}
{{data.sender}}

后者的优点是文档中只存在一个跨距，其中ng show/ng hide all跨距存在于文档中，它们仅使用display:none隐藏。

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

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

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

这种类型的逻辑实际上属于负责在$scope中设置数据的控制器或服务。把它放在视图中会给视图带来许多不必要的逻辑，并且会导致该逻辑作为一个昂贵和不必要的表运行。

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

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

那么在您看来，您绑定到data.displayed发送方：

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

如果需要角度模板中的ELSIF，可以使用C/C++中的三元运算符。

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

1
2
3
4
5
6
7
8
9
10
11
12

angular.module('quetion_app', []);

angular.module('quetion_app').controller('quertion_controller', ['$scope',
function($scope) {

$scope.data = {
sender: 'some sender',
receiver: 'somebody'
};

}
]);

1
2
3
4
5
6
7
8
9
10

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

希望它有帮助