Inaczej jeśli w szablonie kątowym js

Question

Potrzebuję użyć else jeśli w szablonie angularjs .Jaka jest składnia? Na przykład w CI byłoby napisać kod jak poniżej:

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

Mój kod:

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

Tutaj jest, ale trzeba naprawdę starają się uniknąć tego rodzaju skomplikowanej logiki wewnątrz szablonów, jako zasada.

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

Answer 3

Jeśli potrzebujesz elseif w kątowym szablonu można użyć operatora potrójny jak w 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>

Zmian data.sender w opisie, aby sprawdzić zachowanie

Nadzieja pomaga

Answer 4

Nie ma if-else składni w kanciastych szablonów jak szukasz. Zbyt duża logika w szablonach sprawia, że ​​trudno ją utrzymać. Oto dwa możliwe rozwiązania:

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

Można również użyć NG-przełącznik w podobny sposób:

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

Później mając tę ​​zaletę, że tylko jedno z przęseł będzie istnieć w dokumencie, w którym ng -show/ng-hide wszystkie zakresy istnieją w dokumencie, który po prostu zostały ukryte za pomocą wyświetlacza: brak.

Inne opcje to pisanie własnej dyrektywy lub tworzenie specjalnych filtrów.

Answer 5

Ten typ logiki naprawdę należy do kontrolera lub usługi, która jest odpowiedzialna za konfigurowanie danych w swoim $ scope. Umieszczenie go w widoku powoduje niepotrzebną logikę widoku, a także powoduje, że logika jest uruchamiana jako zegarek, który jest zarówno drogi, jak i niepotrzebny.

w kodzie, który ustala dane można mieć:

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

Następnie w widoku zwiążesz na data.displayed nadawcy:

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