Angularjs xây dựng if-then-else trong biểu thức


109

Tôi có thể bằng cách nào đó sử dụng cấu trúc if-then-else (toán tử bậc ba) trong biểu thức anglejs không, ví dụ: tôi có hàm $ scope.isExists (item) phải trả về giá trị bool. Tôi muốn một cái gì đó như thế này,

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

Tôi biết rằng tôi có thể sử dụng hàm trả về chuỗi, tôi thú vị với khả năng sử dụng cấu trúc if-then-else vào biểu thức. Cảm ơn.


3
Kiểm trang-switch
NilsH

3
Kể từ 1.2, điều này hiện đã được hỗ trợ.
nilskp

Câu trả lời:


219

Biểu thức góc không hỗ trợ toán tử bậc ba trước 1.1.5, nhưng nó có thể được mô phỏng như thế này:

condition && (answer if true) || (answer if false)

Vì vậy, ví dụ, một cái gì đó như thế này sẽ hoạt động:

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

CẬP NHẬT: Angular 1.1.5 hỗ trợ thêm cho các toán tử bậc ba:

{{myVar === "two" ? "it's true" : "it's false"}}

&& có cần được thoát không?
0xcaff

@caffinatedmonkey không bạn phải không. Bạn có thể (nếu có thể cho dự án của mình) sử dụng toán tử bậc ba như tôi đã giải thích trong câu trả lời của tôi cho câu hỏi chủ đề.
Sebastian

@Sebastian Điều gì về <>là toán tử so sánh?
0xcaff

@caffinatedmonkey Cũng không sao, {{1> 0? true: false}} hoặc {{1> 0}} bất cứ thứ gì bạn thích. {{1> 0}} cũng hoạt động trong 1.0.8, nhưng toán tử bậc ba thì không.
Sebastian

Đây vẫn là một câu trả lời tuyệt vời vì nó hoạt động bên trong cài đặt của các thành phần góc-ui (trong khi toán tử bậc ba không hoạt động ở đó vì lý do nào đó). Có lẽ điều này sẽ giúp người đấu tranh để thiết lập các thông số góc-ui
Olga Gnatenko

39

Bạn có thể sử dụng toán tử bậc ba kể từ phiên bản 1.1.5 trở lên giống như được trình bày trong plunker nhỏ này (ví dụ trong 1.1.5):

Vì lý do lịch sử (có thể plnkr.co bị gỡ xuống vì một số lý do trong tương lai), đây là mã chính của ví dụ của tôi:

{{true?true:false}}

Vì lý do lịch sử (có thể plnkr.co nhận được xuống vì một lý do trong tương lai) ở đây là mã chính của ví dụ của tôi:{{true?true:false}}
Sebastian

1
Chính xác những gì tôi đang tìm kiếm cảm ơn bạn, gần như đã sử dụng một bộ lọc để làm điều này.
Gạch bất biến

1
@IgorCh: Bạn có thể muốn cập nhật câu trả lời được chấp nhận :)
Răzvan Flavius ​​Panda

25

Bạn có thể dễ dàng sử dụng ng-show như:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

Đối với các bài kiểm tra phức tạp hơn, bạn có thể sử dụng câu lệnh ng-switch:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>

Một lợi thế của việc làm điều đó ở cấp phần tử như thế này thay vì bên trong biểu thức là bạn có thể tùy chỉnh kiểu và nội dung của các tùy chọn khác nhau nhiều hơn.
Supr

Có, tôi biết về chức năng này, nó có thể hữu ích, nhưng tôi không muốn thêm div bổ sung vào tài liệu. nhưng cũng cảm ơn
IgorCh

0

Điều này có thể được thực hiện trong một dòng.

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

Cách sử dụng trong tdthẻ:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.