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