Operator ternary dalam templat AngularJS


239

Bagaimana Anda melakukan ternary dengan AngularJS (dalam templat)?

Akan menyenangkan untuk menggunakan beberapa atribut html (kelas dan gaya) daripada membuat dan memanggil fungsi controller.

Jawaban:


374

Pembaruan : Angular 1.1.5 menambahkan operator ternary , jadi sekarang kita bisa menulis

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

Jika Anda menggunakan versi Angular sebelumnya, dua pilihan Anda adalah:

  1. (condition && result_if_true || !condition && result_if_false)
  2. {true: 'result_if_true', false: 'result_if_false'}[condition]

item 2. di atas membuat objek dengan dua properti. Sintaks array digunakan untuk memilih properti dengan nama true atau properti dengan nama false, dan mengembalikan nilai yang terkait.

Misalnya,

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$ first disetel ke true di dalam ng-repeat untuk elemen pertama, jadi di atas akan menerapkan kelas 'myClass1' dan 'myClass2' hanya pertama kali melalui loop.

Dengan ng-class ada cara yang lebih mudah: ng-class mengambil ekspresi yang harus dievaluasi sebagai berikut:

  1. serangkaian nama kelas yang dibatasi ruang
  2. array nama kelas
  3. peta / objek nama kelas ke nilai boolean.

Contoh 1) diberikan di atas. Berikut adalah contoh dari 3, yang menurut saya berbunyi jauh lebih baik:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

Pertama kali melalui loop berulang, kelas myClass ditambahkan. Ketiga kalinya sampai ($ indeks dimulai pada 0), kelas anotherClass ditambahkan.

ng-style mengambil ekspresi yang harus dievaluasi ke peta / objek nama gaya CSS ke nilai CSS. Misalnya,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

6
Jika saya bisa, saya akan memperbaharui Anda lagi karena memperbarui pertanyaan!
Narretz

2
Saya akan membereskannya, @ Narretz.
Ian Hunter

1
Dalam contoh mengakses objek-kunci, Anda dapat melewati kunci 'salah' karena itu adalah string kosong.
0xc0de

Kata peringatan, 1.1.5 saat ini tidak stabil.
Adam Grant

Bagaimana jika kondisi berubah ketika model Anda diperbarui? Saya ingin ng-stylememperbarui, tetapi tampaknya hanya dievaluasi ketika elemen pertama kali diberikan. (Sudut noob di sini)
Hartley Brody

86

Pembaruan: Angular 1.1.5 menambahkan operator ternary, jawaban ini hanya benar untuk versi sebelumnya 1.1.5. Untuk 1.1.5 dan yang lebih baru, lihat jawaban yang saat ini diterima.

Sebelum Angular 1.1.5:

Bentuk terner dalam angular adalah:

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

Contohnya adalah:

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

atau:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

1
Aneh. Itu tidak terlalu intuitif. Saya bertanya-tanya mengapa ini diterapkan seperti ini.
Ben Lesh

4
Ternary tidak pernah diimplemetasikan, tetapi ini hanya menggunakan operator biner seperti cara mereka bekerja.
Andrew Joslin

18
@blesh, AngularJS mempromosikan kemampuan uji. Template tidak boleh mengandung logika apa pun. Operator ternary dalam suatu templat harus di refactored ke pemanggilan fungsi ke pengontrol, untuk pengujian yang lebih baik.
Marcello Nuccio

1
@ arg20 Anda harus menggunakan arahan ngClass (atau ngClassEven dan ngClassOdd). Kemudian letakkan semua logika untuk memilih kelas css di controller. Ini jauh lebih mudah untuk diuji secara otomatis.
Marcello Nuccio

1
@ arg20 saya katakan untuk meletakkannya di controller, bukan dalam model. Ini seharusnya tidak menjadi masalah. Namun, dokumentasi mengatakan: "Hasil evaluasi dapat berupa string yang mewakili ruang nama kelas yang dibatasi, array, atau peta nama kelas ke nilai boolean". Berarti Anda dapat menggunakan "{cssclass: someBoolCheck ()}" sebagai ekspresi, yaitu Anda meletakkan kelas css di tampilan, dan logika di controller. Lihatlah jsFiddle ini sebagai contoh.
Marcello Nuccio

23

Untuk teks dalam templat sudut ( userTypeadalah properti dari $ scope, seperti $ scope.userType):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

11

Sekarang kita semua menemukan versi 1.1.5 hadir dengan $parsefungsi ternary yang tepat jadi gunakan saja jawaban ini sebagai contoh filter:

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

Dan kemudian gunakan sebagai

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

2
Saya datang ke pertanyaan ini untuk operator ternary tetapi pada akhirnya saya pergi dengan filter dan rasanya sangat bagus ... = D
slacktracer



0
  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

Tombol beralih dan mengubah tajuk tombol dan menampilkan / menyembunyikan panel div. Lihat Plunkr

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.