Khác nếu trong mẫu js góc cạnh

Question

Tôi cần sử dụng khác nếu trong mẫu angularjs. Cú pháp là gì? Ví dụ trong ci sẽ viết mã như dưới đây:

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

Mã của tôi:

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

Ở đây nó được, nhưng bạn thực sự nên cố gắng tránh việc loại logic phức tạp bên trong của mẫu, như một quy luật của.

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

Answer 3

Nếu bạn cần một elseif trong mẫu góc cạnh, bạn có thể sử dụng một nhà điều hành ternary như trong 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>

Thay đổi data.sender trong đoạn mã để kiểm tra hành vi

Hy vọng nó giúp

Answer 4

Không có if-else cú pháp trong các mẫu góc cạnh như bạn đang tìm kiếm. Quá nhiều logic trong các mẫu làm cho nó khó duy trì. Dưới đây là hai giải pháp khả thi:

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

Bạn cũng có thể sử dụng ng-switch trong một cách tương tự:

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

này sau đó có ưu điểm là chỉ một trong những nhịp sẽ tồn tại trong văn bản nơi ng -show/ng-hide tất cả các nhịp tồn tại trong tài liệu mà chúng chỉ ẩn bằng cách sử dụng display: none.

Các tùy chọn khác sẽ là viết chỉ thị của riêng bạn hoặc tạo bộ lọc đặc biệt.

Answer 5

Loại logic này thực sự thuộc về bộ điều khiển hoặc dịch vụ chịu trách nhiệm thiết lập dữ liệu trong phạm vi $ của bạn. Đặt nó trong tầm nhìn của bạn mang lại rất nhiều logic trong quan điểm không cần thiết và cũng gây ra logic đó được chạy như một chiếc đồng hồ mà cả đắt tiền và không cần thiết.

Trong đoạn code đó thiết lập dữ liệu bạn có thể có:

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

Sau đó, theo quan điểm của bạn, bạn liên kết với data.displayed người gửi:

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