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.

javascript html angularjs ternary-operator cricardol
sumber

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>
Mark Rajcok
sumber
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>
cricardol
sumber
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>
Ikrom
sumber
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>
Jan
sumber
2
Saya datang ke pertanyaan ini untuk operator ternary tetapi pada akhirnya saya pergi dengan filter dan rasanya sangat bagus ... = D
slacktracer
10

Itu dia: operator ternary ditambahkan ke angular parser di 1.1.5 ! lihat changelog

Berikut ini biola yang menunjukkan operator ternary baru yang digunakan dalam arahan kelas-ng.

ng-class="boolForTernary ? 'blue' : 'red'"
singa hutan
sumber
10

Meskipun Anda dapat menggunakan condition && if-true-part || if-false-part-syntax dalam versi angular yang lebih lama, operator ternary condition ? true-part : false-parttersedia di Angular 1.1.5 dan yang lebih baru .

Aleksander Blomskøld
sumber
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

Zahid Rahman
sumber