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.

— cricardol
sumber

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:

(condition && result_if_true || !condition && result_if_false)
{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:

serangkaian nama kelas yang dibatasi ruang
array nama kelas
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