Question

这是我的代码。我为if condition申请了css，并删除了else condition的css工作正常。
但我不想在一个tr中使用2 <tr>我需要实现这一点，我不想使用inine css。

<tr ng-repeat="data in userList"
   ng-if="data.appDate>=delivery.joinedDate"
   ng-style="{'background-color': '#ffd6d6','border':'dashed 3px #9e0b0f'}">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate }}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>
<tr ng-repeat="data in userList" ng-if="!(data.appDate>=delivery.joinedDate)">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate }}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>

有什么建议吗？

Answer 1

您可以使用ng-class指令执行此操作。您只需在样式表中将样式添加为类，并将角度代码更改为：

<tr ng-repeat="data in userList" 
    ng-class="{ 'my-css-class': data.appDate>=delivery.joinedDate }">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate }}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>

样式表：

.my-css-class {
    background-color: #ffd6d6;
    border: dashed 3px #9e0b0f;
}

Answer 2

尝试查看ngClass。

您可以根据模型动态设置css。

Angularjs ngClass docs

作为一个注释，内联样式不是一种好的做法。

在AngularJS中的ng-repeat中有条件地应用CSS样式

2 个答案: