有条件的 AngularJS/Bootstrap 颜色单元答案

【问题标题】：AngularJS/Bootstrap color cells on conditon有条件的 AngularJS/Bootstrap 颜色单元
【发布时间】：2014-12-23 21:20:57
【问题描述】：

我有一个包含各种数据的引导表。如果某个参数等于字符串，我希望行的最后一个单元格以特殊颜色着色。

所以我现在使用的代码是这样的：

<tr ng-repeat="data in responseData">
        <td>{{data.title}}</td>
        <td>{{data.description}}</td>
        ...
        <td class="status" ng-class="{ 'available': data.status=='string1', 'taken': data.status!='string1'}"></td>
</tr>

还有css文件：

.status{
padding:1px !important;
width:10px;
}

.status_available{
    background-color: green;
}

.status_taken{
    background-color:red;
    width:10px;
    height:100%;
}

但是 td 在初始化值中没有着色。我使用 Chrome，开发者工具显示正确的类在 td 上，但如上所述，颜色是标准颜色。

谁能帮帮我？

【问题讨论】：

标签： html css angularjs twitter-bootstrap ng-class

【解决方案1】：

根据你的 css 应该是：

<td class="status" ng-class="{ 'status_available': data.status=='string1', 'status_taken': data.status!='string1'}"></td>

或者把你的css改成：

.status.available{
    background-color: green;
}

.status.taken{
    background-color:red;
    width:10px;
    height:100%;
}

【讨论】：

谢谢！但如上所述，样式被应用于 td...但它并没有以某种方式显示...

【解决方案2】：

不好的事情但是 - 你可以通过将“！important”应用于你的css规则来强制它，比如背景颜色：红色！重要；可能在您的样式之后应用了一些引导样式。

【讨论】：