İfadede Angularjs if-then-else yapısı


109

Angularjs ifadesinde bir şekilde if-then-else yapısını (ternary-operator) kullanabilir miyim, örneğin bool değerini döndürmesi gereken $ kapsam.isExists (öğe) fonksiyonum var. Bunun gibi bir şey istiyorum

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

String döndüren bir işlevi kullanabileceğimi biliyorum, if-then-else yapısını ifadede kullanma olasılığıyla ilgileniyorum. Teşekkürler.



3
1.2'den beri bu artık desteklenmektedir.
— nilskp

Yanıtlar:


219

Açısal ifadeler 1.1.5'ten önceki üçlü operatörü desteklemez, ancak şu şekilde taklit edilebilir:

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

Yani örneğin, şöyle bir şey işe yarar:

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

GÜNCELLEME: Üçlü operatörler için açısal 1.1.5 desteği eklendi:

{{myVar === "two" ? "it's true" : "it's false"}}

&&'Nin kaçılması gerekiyor mu?
— 0xcaff

@caffinatedmonkey hayır yapmamalısın. Konu sorusuna verdiğim cevapta açıkladığım gibi (projeniz için mümkünse) üçlü operatörü kullanabilirsiniz.
— Sebastian

Ne hakkında @Sebastian <ve >karşılaştırma operatörleri olarak?
— 0xcaff

@caffinatedmonkey Ayrıca sorun değil, {{1> 0? true: false}} veya {{1> 0}} ne istersen. {{1> 0}} 1.0.8'de de çalışır, ancak üçlü operatör çalışmaz.
— Sebastian

Açısal-ui bileşenlerinin ayarlarında çalıştığı için bu hala harika bir cevaptır (üç terimli operatör herhangi bir nedenle orada çalışmaz). Belki bu, açısal-ui parametrelerini belirlemekte zorlanan birine yardımcı olur
— Olga Gnatenko

39

Bu küçük plunker'da gösterildiği gibi 1.1.5 ve üzeri sürümlerden beri üçlü operatörü kullanabilirsiniz (örnek 1.1.5'te ):

Geçmişle ilgili nedenlerden dolayı (belki plnkr.co gelecekte bir nedenden dolayı aşağı inebilir) örneğimin ana kodu:

{{true?true:false}}

Geçmişle ilgili nedenlerden dolayı (belki plnkr.co gelecekte bir nedenden dolayı aşağı inebilir) işte örneğimin ana kodu:{{true?true:false}}
— Sebastian

1
Tam olarak aradığım şey teşekkür ederim, bunu yapmak için neredeyse bir filtre kullanıyordum.
— Immutable Brick

1
@IgorCh: Kabul edilen yanıtı güncellemek isteyebilirsiniz :)
— Răzvan Flavius ​​Panda

25

Ng-show'u aşağıdaki gibi kolayca kullanabilirsiniz:

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

Daha karmaşık testler için ng-switch ifadelerini kullanabilirsiniz:

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

İfadenin içi yerine bu şekilde eleman seviyesinde yapmanın bir avantajı, farklı seçeneklerin stilini ve içeriğini çok daha fazla özelleştirebilmenizdir.
— 2013

Evet, bu işlevselliğin yardımcı olabileceğini biliyorum, ancak belgeye fazladan div eklemek istemiyorum. ama aynı zamanda teşekkürler
— IgorCh

0

Bu tek satırda yapılabilir.

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

Bir tdetikette kullanım :

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.