如何在角度表中檢查td中的多個條件？

我需要根據條件更改TD內某些元素的文本顏色。如何在角度表中檢查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>

在上表中，TD裏面用標題「當前狀態」文字的顏色，如果將變爲紅色條件（employee.state.state ==「可用'）是真的。

我的CSS文件：

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

同樣地，我想有不同的顏色相同的TD如果其他條件爲真。即，如果（employee.state.state =='Blocked'），我希望文本呈藍色。我有超過3個州，並希望爲每個州的不同顏色，所以簡單的如果別人不會工作。

我該如何做到這一點？

在此先感謝...

來源

2016-09-19 Phoenix

嘗試這個邏輯進入控制器：

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

來源

2016-09-19 11:02:42 Razzka

非常感謝！這就像一個魅力！ – Phoenix

你需要的是這樣的：

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

第三個也是更好的選擇是在這裏寫一個函數並將邏輯移到控制器：

<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'; 
    } 
}

來源

2016-09-19 10:57:28 nikjohn

感謝您看看這個問題！我實際上想要的是我的所有狀態都有不同的顏色...... IE有兩種以上的狀態。我會在我的問題中提到同樣的問題，以避免再次混淆。 – Phoenix

再次感謝您的幫助。當我第一次得到答案時，將另一個標記爲答案。 Upvoted你的一個，因爲它也在工作。 :) – Phoenix

如果你喜歡一個在線解決方案，則：

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

應該訣竅

來源

2016-09-19 11:12:52 Lekhnath

如何在角度表中檢查td中的多個條件？

回答

相關問題