1. ホーム
  2. angularjs

[解決済み】AngularJSのngクラスのif-else式

2022-04-18 07:47:12

質問

AngularJS を使っています。 ng-class は、次のようにします。

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

を使えばいいのかなと思っています。 if-else という表現で、これに近いことができます。

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

だから、いつでも call.State とは異なります。 first または second 使用 classC と、各値の指定を避けることができますか?

どのように解決するのですか?

ネストされたインラインの if-then 文 ( 三項演算子 )

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

例えば

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

そして、それが 同僚が読むことができる :)