角度jsテンプレート内にある場合

Question

anglejsテンプレート内にelseを使用する必要があります。構文は何ですか？ は、例えば、CIのコード以下のように記述します。

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

それはですが、あなたが本当にテンプレートの内部で複雑なロジックのこの種のを避けるために試してみてください、経験則として

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

Answer 3

あなたは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 4

は角テンプレートでノーのif-else構文があるのに役立ちます願っています。テンプレートに論理が多すぎると、保守が困難になります。ここでは、2つの可能な解決策は以下のとおりです。

あなたはまた、同様の方法でNG-スイッチを使用することができます

<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に存在するという利点を持つ

<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> 

-show/ng-hideすべてのスパンはdisplay：noneを使って隠されているドキュメントに存在します。

その他のオプションは、独自の指令を書いたり、特殊なフィルタを作成することです。

Answer 5

このタイプのロジックは実際に$ scope内のデータを設定するコントローラまたはサービスに属します。それをあなたのビューに置くことは、不必要にビューに多くのロジックをもたらし、またそのロジックを高価で不必要なウォッチとして実行させます。

あなたが持っている可能性があり、データを確立コードで

：次に、あなたのビューであなたがdata.displayed送信者に特異的に結合する

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

：

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