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.