Question

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

My Angular表格是：

<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内的文字颜色标题为＆＃39;当前状态＆＃39;如果条件（employee.state.state ==＆＃39;可用＆＃39;）为真，则会更改为红色。

我的CSS文件：

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

同样，如果另一个条件成立，我想为同一个TD设置不同的颜色。即，if（employee.state.state ==＆＃39; Blocked＆＃39;），我希望文本为蓝色。我有超过3个状态，并希望每个状态都有不同的颜色，所以一个简单的If 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>

第三个更好的选择是在这里编写一个函数并将逻辑移动到控制器：

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

应该做的伎俩

如何检查Angular表中td内的多个条件？

3 个答案: