如何检查角度表中td内的多个条件？ [英] How to check multiple conditions within a td in Angular table?

问题描述

我需要根据条件更改TD内部的某些元素的文字颜色。

我的角度表是：

 < table ng-table =employeesListshow-filter =trueclass =table table-striped table-bordered> 
< trng-repeat =$ data中的employee> 
< td data-title ='＃'> {{$ index + 1}}< / td> 
< td data-title ='First Name'sortable ='firstName'filter ={'firstName'：'text'}> 
 {{employee.employee.firstName}} 
< / td> 
< td data-title ='当前状态'sortable ='currentState'ng-class ={red：employee.state.state =='Available'}> 
 {{employee.state.state}} 
< / td> 
< / tr> 
< / table> 
  

在上表中，标题为当前状态的TD内的文本颜色将更改为红色如果条件（employee.state.state =='Available'）为true。

我的CSS文件：

  .red {
 color：red; 
} 
 .blue {
 color：blue; 
} 
  

同样，如果另一个条件是真正。
ie，if（employee.state.state =='Blocked'），我想要的文本是蓝色的。我有超过3个州，每个国家都需要不同的颜色，所以一个简单的如果否则将无法工作。

我该如何实现？ p>

提前感谢...

解决方案

控制器：

 < 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; 
默认值：
 break; 
} 
 
 return classNames; 
} 
  

I need to change the text color of some elements inside TD based on conditions.

My Angular table is :

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

In the above table, the color of text inside TD with title 'Current state' will change to Red if the condition (employee.state.state == 'Available') is true.

My CSS file :

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

Similarly I want to have a different color for the same TD if another condition is true. ie, if (employee.state.state == 'Blocked'), I want the text to be in blue color. I have more than 3 states and want a different color for each of the state, so a simple If else won't work.

How can I achieve this?

Thanks in advance...

解决方案

Try to move this logic into controller:

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

and in the controller:

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

这篇关于如何检查角度表中td内的多个条件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！