263

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したりしないようにするときはいつですか?firstsecondclassC

4

9 に答える 9

65

どちらも真でない場合は「else」またはデフォルトの両方になる可能性のある2つの「if」ステートメントが必要な状況がありました。これがジョセフの答えの改善であるかどうかはわかりませんが、私にはきれいに見えました：

ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"

value.one と value.two が true の場合、.else-class よりも優先されます。

于 2014-05-23T15:44:47.943 に答える
0

私の回避策は、ng-class の切り替えのためだけにモデル変数を操作することです。

たとえば、リストの状態に応じてクラスを切り替えたいとします。

1) リストが空になるたびに、モデルを更新します。

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2）リストが空でないときはいつでも、別の状態を設定します

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3) リストがまったく変更されていない場合、別のクラスを提供したいと思います (ここでページが開始されます)。

$scope.liststate = "init";

3) ng-class でこの追加モデルを使用します。

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"
于 2016-05-17T08:08:09.443 に答える