AngularJS şablonlarında üçlü operatör

239

AngularJS ile üçlü bir şablon nasıl yapılır (şablonlarda)?

Denetleyicinin bir işlevini oluşturmak ve çağırmak yerine html özniteliklerinde (sınıflar ve stil) bazılarını kullanmak güzel olurdu.

— cricardol
kaynak

374

Güncelleme : Açısal 1.1.5 üçlü bir operatör ekledi , böylece şimdi yazabiliriz

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

Angular'ın önceki bir sürümünü kullanıyorsanız, iki seçeneğiniz şunlardır:

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

madde 2. yukarıdaki iki özelliğe sahip bir nesne oluşturur. Dizi sözdizimi, true adlı özelliği veya false adlı özelliği seçmek ve ilişkili değeri döndürmek için kullanılır.

Örneğin,

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

$ first, ilk öğe için bir ng tekrarı içinde true değerine ayarlanır, bu nedenle yukarıdaki 'myClass1' ve 'myClass2' sınıflarını yalnızca döngü boyunca ilk kez uygular.

Ng sınıfı ile daha kolay bir yol vardır: ng sınıfı aşağıdakilerden birini değerlendirmesi gereken bir ifade alır:

boşlukla sınırlandırılmış sınıf adları dizesi
sınıf isimleri dizisi
sınıf adlarının boole değerleriyle eşlenmesi / eşleştirilmesi.

Yukarıda 1) örneği verilmiştir. İşte çok daha iyi okuduğunu düşündüğüm 3 örneği:

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

İlk kez bir ng tekrar döngüsünde sınıf myClass eklenir. 3. kez ($ endeksi 0'da başlar), anotherClass sınıfı eklenir.

ng-stili , CSS stil isimlerinin CSS değerleriyle eşlenmesi / nesnesi için değerlendirilmesi gereken bir ifade alır. Örneğin,

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

— Mark Rajcok
kaynak

6

Eğer yapabilirsem soruyu güncellemek için tekrar seni oylayabilirdim

— Narretz

2

Ben hallederim, @Narretz.

— Ian Hunter

1

Nesne anahtarına erişme örneğinde, zaten boş dize olduğu için 'false' anahtarını atlayabilirsiniz.

— 0xc0de

Uyarı kelimesi, 1.1.5 şu anda kararlı değil.

— Adam Grant

Modeliniz güncellendiğinde koşullu değişiklik olursa ne olur? ng-styleGüncellemek istiyorum , ancak sadece öğe ilk oluşturulduğunda değerlendirilmiş gibi görünüyor. (Açısal noob burada)

— Hartley Brody

86

Güncelleme: Açısal 1.1.5 üçlü bir operatör ekledi, bu cevap yalnızca 1.1.5'ten önceki sürümler için geçerlidir. 1.1.5 ve sonraki sürümler için şu anda kabul edilen cevaba bakınız.

Açısal 1.1.5 öncesi:

Angularjs'deki üçlü bir şekil:

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

Örnek olarak şunlar verilebilir:

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

veya:

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

— cricardol
kaynak

1

Tuhaf. Bu çok sezgisel değil. Neden bu şekilde uygulandığını merak ediyorum.

— Ben Lesh

4

Üçlü asla uygulanmadı, ama bu sadece ikili operatörleri çalışma şekillerini kullanıyor.

— Andrew Joslin

18

@blesh, AngularJS test edilebilirliği teşvik eder. Şablonlar herhangi bir mantık içermemelidir. Bir şablondaki üçlü bir operatör, daha iyi test edilebilirlik için kontrolöre yapılan bir işlev çağrısına yeniden konulmalıdır.

— Marcello Nuccio

1

@ arg20, ngClass yönergesini (veya ngClassEven ve ngClassOdd) kullanmalısınız. Sonra denetleyicide css sınıflarını seçmek için tüm mantığı koyun. Bunu otomatik olarak test etmek çok daha kolaydır.

— Marcello Nuccio

1

@ arg20 Modelde değil, kontrolöre koymayı söyledim. Bu bir problem olmamalı. Ancak, belgeler şöyle der: "Değerlendirmenin sonucu, boşlukla sınırlandırılmış sınıf adlarını, bir diziyi veya sınıf adlarının boole değerleriyle eşlemesini temsil eden bir dize olabilir". Yani, "{cssclass: someBoolCheck ()}" ifadesini bir ifade olarak kullanabilirsiniz, yani css sınıfını görünüme ve mantığı denetleyiciye koyabilirsiniz. Bak bu jsFiddle bir örnek için.

— Marcello Nuccio

23

Açısal şablondaki metinler için ( userType$ scope, $ scope.userType gibi bir özelliktir):

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

— Ikrom
kaynak

11

Şimdiye kadar hepimiz 1.1.5 versiyonunun $parsefonksiyonda uygun bir üçlü ile geldiğini öğrendik, bu yüzden sadece bu cevabı filtrelerin bir örneği olarak kullanın:

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

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

Ve sonra onu

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

— Ocak
kaynak

2

Üçlü operatör için bu soruya geldim ama sonunda bir filtre ile gittim ve gerçekten iyi hissettim ... = D

— slacktracer

10

İşte: üçlü operatör açısal ayrıştırıcıya 1.1.5'te eklendi ! değişiklik günlüğüne bakın

İşte ng-class yönergesinde kullanılan yeni üçlü operatörü gösteren bir keman .

ng-class="boolForTernary ? 'blue' : 'red'"

— lionroots
kaynak

10

Eğer kullanabilirsiniz ancak condition && if-true-part || if-false-partaçısal eski sürümlerinde -Sözdizimi, olağan üçlü operatör condition ? true-part : false-partmevcuttur 1.1.5 ve üstü Açısal .

— Aleksander Blomskøld
kaynak

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>

Düğme geçiş ve düğme üstbilgisini değiştirmek ve div panelini göstermek / gizlemek. Plunkr'ı görün

— Zahid Rahman
kaynak