Javascript 否则如果在 angular js 模板中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27732474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Else if in angular js template
提问by query
I need to use else if in angularjs template .What is the syntax ? For example in c i would write the code like below:
如果在 angularjs 模板中，我需要使用 else if 。语法是什么？例如在 ci 中将编写如下代码：
if (data.sender=='system')
{data.receiver}
else if (data.sender=='mail')
{data.receiver}
else {data.sender}
My code:
我的代码：
{{data.sender == 'System' ? data.receiver : ' '}}
{{data.sender =='mail' ? data.receiver : data.sender }}
回答by hjl
{{(data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender}}
回答by chubbsondubs
There are no if-else syntax in angular templates as you are looking for. Too much logic in the templates makes it difficult to maintain. Here are two possible solutions:
您正在寻找的角度模板中没有 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>
You can also use ng-switch in a similar way:
您也可以以类似的方式使用 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>
The later having the advantage that only one of the spans will exist in the document where ng-show/ng-hide all spans exist in the document they are just hidden using display:none.
后者的优点是只有一个跨度将存在于文档中，其中 ng-show/ng-hide 所有跨度存在于文档中，它们只是使用 display:none 隐藏。
Other options would be writing your own directive, or creating special filters.
其他选项是编写您自己的指令，或创建特殊过滤器。
回答by holographic-principle
Here it is, but you should really try to avoid having this kind of complicated logic inside of templates, as a rule of thumb.
就是这样，但是根据经验，您真的应该尽量避免在模板内部使用这种复杂的逻辑。
{{ data.sender == 'system' ? data.receiver : data.sender == 'mail' ? data.receiver : data.sender }}
回答by Andres
If you need an elseifin angular template you can use a ternary operator as in C/C++
如果您需要在角度模板中使用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>Change data.senderin snippet to check the behavior
在代码段中更改data.sender以检查行为
Hope it helps
希望能帮助到你
回答by musicfuel
This type of logic really belongs in the controller or service which is responsible for setting up data in your $scope. Placing it in your view brings a lot of logic in to the view unnecessarily and also causes that logic to be run as a watch which both expensive and unnecessary.
这种类型的逻辑真正属于负责在 $scope 中设置数据的控制器或服务。将它放置在您的视图中会不必要地将许多逻辑引入视图，并且还会导致该逻辑作为一个既昂贵又不必要的手表运行。
In the code that establishes data you could have:
在建立数据的代码中，您可以拥有：
data.displayedSender = (data.sender === 'system' || data.sender === 'mail') ? data.receiver : data.sender;
Then in your view you bind to the data.displayedsender:
然后在您的视图中绑定到data.displayed发件人：
<span>{{data.displayedSender}}</span>
