角度テーブルでtd内の複数の条件をチェックする方法は？

Question

条件に基づいてTD内のいくつかの要素のテキストの色を変更する必要があります。

マイ角度テーブルがある：上記の表で

<table ng-table="employeesList" show-filter="true" class="table table-striped table-bordered"> 
        <tr ng-repeat="employee in $data"> 
         <td data-title="'#'">{{$index + 1}}</td> 
<td data-title="'First Name'" sortable="'firstName'" filter="{ 'firstName': 'text' }"> 
          {{employee.employee.firstName}} 
         </td> 
<td data-title="'Current State'" sortable="'currentState'" ng-class="{ red: employee.state.state == 'Available'}"> 
          {{employee.state.state}} 
         </td> 
</tr> 
       </table> 

条件（employee.state.state ==「利用可能な場合は、タイトル「現在の状態」とTD内のテキストの色が赤に変わります'）は真実です。

私のCSSファイル：

.red { 
color: red; 
} 
.blue { 
color:blue; 
} 

同様に私は別の条件が真の場合、同じTDに異なる色を持っていると思います。 つまり、（employee.state.state == 'Blocked'）の場合、テキストを青色にします。私は3つ以上の州を持っていて、それぞれの州ごとに異なる色をしたいので、単純な場合はelseは機能しません。

どうすればこの問題を解決できますか？事前に

おかげで...

Answer 1

は、コントローラにこのロジックを移動しよう：

<td ng-class="calculateClass(employee)"> 

とコントローラで：

$scope.calculateClass = function(employee) { 
    var classNames = []; 
    switch (employee.state.state) { 
     case 'Available': 
      classNames.push('red'); 
     break; 
     case 'Blocked': 
      classNames.push('blue'); 
     break; 
     default: 
     break; 
    } 

    return classNames; 
} 

Answer 2

何がしたいことは、このようなものです：あなたがより多くのオプションが必要な場合、あなたはいつものように演算子を拡張することができます

<td ng-class="employee.state.state == 'Available' ? 'red' : 'blue'">{{employee.state.state}}</td>

：

<td ng-class="(employee.state.state == 'Available') ? 'red' : (employee.state.state == 'Blocked') ? 'blue'">{{employee.state.state}}</td>

第3のより良いオプションは、ここに関数を書き込んでロジックをコントローラ：

<td ng-class="chooseClass">{{employee.state.state}}</td> 


// Controller 
$scope.chooseClass = function(employee) { 
    switch(employee.state.state) { 
    case 'Available': 
    return 'red'; 
    break; 
    : 
    : 
    default: 
    return 'white'; 
    } 
} 

Answer 3

あなたはその後、一行ソリューション、希望する場合：

をng-class="{'Available': 'red', 'Blocked': 'blue'}[employee.state.state]"

は、このトリックを行う必要があります