Question

您好我有以下代码，它基本上是选择字段的td。选择字段内的列表的值范围为1-10。如果所选值大于6？

，如何更改td的背景颜色

<td>
    {%verbatim%}
    <select class="form-control" ng-model="l.o_value"  ng-change="getRpn(k)"
            ng-options="o.rank as (o.rank+o.generic_value) for o in occ_list">
    {%endverbatim%}
    </select>
</td>

Answer 1

您好，请参阅此链接https://plnkr.co/edit/MpHtLHgXNyrNRYnDDzed

<td ng-class="{ 'bg-red': item.code > 6 }">

Answer 2

使用ng-class确定您的条件，如下所示：

 ng-class="{'colored-background': scopeParameter > 6}"

Answer 3

使用ng-class根据您的条件将课程附加到td，如下所示：

 <td ng-class="{'colored-background': l.o_value> 6}">
    {%verbatim%}
    <select class="form-control" ng-model="l.o_value"  ng-change="getRpn(k)"
            ng-options="o.rank as (o.rank+o.generic_value) for o in occ_list">
    {%endverbatim%}
    </select>
</td>

当您选择的值td大于6

时，这将适用l.o_value上的课程

在你的CSS中创建一个类：

.colored-background {
  background-color: red;
}

Answer 4

您也可以使用ng-style 示例文本

内部

getRpn(n) {
if ($scope.scopeParameter > 6) {
   $scope.myStyle = {'background-color':'blue'};
}
}

https://docs.angularjs.org/api/ng/directive/ngStyle

如果所选值大于6，则更改以更改td背景颜色

4 个答案: