如何使用 bootstrap-classes 和 angularjs 为表中的数据添加背景颜色？答案

【问题标题】：How to add the background-color for data in table using bootstrap-classes and angularjs?如何使用 bootstrap-classes 和 angularjs 为表中的数据添加背景颜色？
【发布时间】：2016-06-28 20:56:39
【问题描述】：

我想做一个小型电子商务应用程序。用户完成订单后，管理员得到订单，订单项目由order id、itemname、price、status、btnclass组成。

订单默认状态为pending，btnclass的值为label-warning，编辑订单pending后，将btnclass的值更改为label-success。但我不知道该怎么做

btnclass 用于存储引导类。

<table>
    <th>order id</th>
    <th>item name</th>
    <th>price</th>
    <th>status</th>
    <th>total</th>
    <tr ng-repeat="item in orders">
        <td>{{item.orderid}}</td>
        <td>{{item.itemname}}</td>
        <td>{{item.price}}</td>
        <td><p class="label {{list.btnclass}}">{{item.status}}</p></td>
        <td>{{item.total}}</td>
    </tr>
</table>

我的数组是这样的：

[
    {
        "orderid":1,
        "itemname":"rice",
        "price":10,
        "status":"pending",
        "btnclass":"label-warning",
        "total":10
    },
    {
        "orderid":2,
        "itemname":oils,
        "price":50,
        "status":"deliverd",
        "btnclass":"label-success",
        "total":50
    }

请帮助我如何为表格数据提供类..

【问题讨论】：

标签： html angularjs angular-ui-bootstrap

【解决方案1】：

ng-class 对此很有用。您可以为状态创建 2 个 CSS 类，例如 .delivered 或 .pending。并使用 ng-class 指令：

<td><p ng-class="{'deliverd' : item.status === 'delivered', 'pending' === 'item.status === 'pending'}">{{item.status}}</p></td>

【讨论】：

谢谢。这很简单。

【解决方案2】：

其实很简单，你得用ng-class。

使用 ng-class 你可以传递一组类和条件来确定是否应该应用这些类，语法是这样的

<any  ng-class="{'my-class':condition===true, 'my-second-class': someFunction()}"   />

注意，传递给 ng-class 的参数是一个 js 对象，其中键是要应用的类的名称，值是条件，如果条件解析为 true，则用作键的类将是应用，否则将被忽略。如您所见，您可以使用第一种情况 (condition===true) 中的表达式，也可以像第二个示例中那样调用函数 (someFunction()) em> 尝试使用它来解决您的问题，如果您不能随时寻求进一步的帮助。

【讨论】：