Altrimenti se in modello angolare js

Question

Ho bisogno di usare altro se nel modello angularjs. Qual è la sintassi? Per esempio in ci sarebbe scrivere il codice come qui di seguito:

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

Il mio codice:

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

Eccolo, ma si dovrebbe davvero cercare di evitare di avere questo tipo di logica complessa all'interno di modelli, come regola generale.

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

Answer 3

Se avete bisogno di un elseif nel modello angolare è possibile utilizzare un operatore ternario come in 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.sender in snippet per verificare il comportamento

Speranza che aiuta

Answer 4

Non ci sono nessun if-else sintassi nei modelli angolari, come si sta cercando. Troppa logica nei modelli rende difficile la manutenzione. Qui sono due possibili soluzioni:

<span ng-show="data.sender == 'mail' || data.sender=='system'">{{data.receiver}}</span> 
<span ng-show="data.sender != 'mail' && data.sender!='system'">{{data.sender}}</span> 

È anche possibile utilizzare ng-switch in modo simile:

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

Più tardi avendo il vantaggio che solo una tra le span esisterà nel documento in cui ng -show/ng-hide tutte le estensioni presenti nel documento sono appena nascoste usando display: none.

Altre opzioni sarebbero scrivere la propria direttiva o creare filtri speciali.

Answer 5

Questo tipo di logica appartiene davvero al controller o al servizio responsabile della configurazione dei dati in $ scope. Inserirla nella vista porta molta logica alla vista inutilmente e fa sì che la logica venga eseguita come un orologio che è sia costoso che inutile.

Nel codice che stabilisce i dati si potrebbe avere:

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

Poi, nel tuo vista che si legano al data.displayed mittente:

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