Konstruksi Angularjs if-then-else dalam ekspresi


109

Dapatkah saya menggunakan konstruksi if-then-else (terner-operator) dalam ekspresi angularjs, misalnya saya memiliki fungsi $ scope.isExists (item) yang harus mengembalikan nilai bool. Saya ingin sesuatu seperti ini,

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

Saya tahu bahwa saya dapat menggunakan fungsi yang mengembalikan string, saya tertarik pada kemungkinan menggunakan konstruksi if-then-else ke dalam ekspresi. Terima kasih.


3
Lihatng-switch
NilsH

3
Sejak 1.2 ini sekarang didukung.
nilskp

Jawaban:


219

Ekspresi sudut tidak mendukung operator terner sebelum 1.1.5, tetapi dapat diemulasikan seperti ini:

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

Misalnya, sesuatu seperti ini akan berhasil:

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

UPDATE: Angular 1.1.5 menambahkan dukungan untuk operator terner:

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

Apakah && perlu di-escape?
0xcaff

@caffinatedmonkey tidak, Anda tidak boleh. Anda dapat (jika memungkinkan untuk proyek Anda) menggunakan operator terner seperti yang saya jelaskan dalam jawaban saya untuk pertanyaan topik.
Sebastian

@Sebastian Bagaimana dengan <dan >sebagai operator pembanding?
0xcaff

@caffinatedmonkey Tidak masalah juga, {{1> 0? true: false}} atau {{1> 0}} apa pun yang Anda suka. {{1> 0}} juga berfungsi di 1.0.8, tetapi operator terner tidak.
Sebastian

Ini masih merupakan jawaban yang bagus karena berfungsi di dalam pengaturan komponen angular-ui (sementara operator terner tidak bekerja di sana karena alasan tertentu). Mungkin ini membantu seseorang yang berjuang untuk mengatur parameter sudut-ui
Olga Gnatenko

39

Anda dapat menggunakan operator terner sejak versi 1.1.5 dan yang lebih baru seperti yang ditunjukkan di alat pemukul kecil ini (contoh di 1.1.5):

Untuk alasan sejarah (mungkin plnkr.co turun karena alasan tertentu di masa mendatang) berikut adalah kode utama dari contoh saya:

{{true?true:false}}

Untuk alasan sejarah (mungkin plnkr.co turun karena alasan tertentu di masa depan) berikut adalah kode utama dari contoh saya:{{true?true:false}}
Sebastian

1
Persis apa yang saya cari terima kasih, hampir menggunakan filter untuk melakukan ini.
Bata Abadi

1
@IgorCh: Anda mungkin ingin memperbarui jawaban yang diterima :)
Răzvan Flavius ​​Panda

25

Anda dapat dengan mudah menggunakan ng-show seperti:

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

Untuk pengujian yang lebih kompleks, Anda bisa menggunakan pernyataan 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>

Keuntungan melakukannya di tingkat elemen seperti ini daripada di dalam ekspresi adalah Anda dapat menyesuaikan gaya dan konten opsi yang berbeda lebih banyak lagi.
Supr

Ya, saya tahu tentang fungsionalitas ini, ini dapat membantu, tetapi saya tidak ingin menambahkan div tambahan ke dokumen. tetapi juga terima kasih
IgorCh

0

Ini bisa dilakukan dalam satu baris.

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

Penggunaan dalam tdtag:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.