javascript - AngularJS 将类添加到 <td> 中，该类由 ngRepeat 从数据库动态生成

Question

我的 table 有问题，因为我不知道该怎么办...

我有一个 html 表格，它是由 Angular 使用数据库中的数据动态生成的，现在我需要向 td 元素添加一些样式。我需要添加的样式，我从数据库中获取(rgb 中的背景颜色)，但我不知道如何？

下面是 Angular 在 View 中生成的代码:

<table class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>Lp.</th>
            <th>image</th>
            <th>Article name:</th>
            <th>Colors in article:</th>
            <th class="ng-binding ng-scope" ng-repeat="y in [] | range:0:number">1</th>
            <th class="ng-binding ng-scope" ng-repeat="y in [] | range:0:number">2</th>
            <th class="ng-binding ng-scope" ng-repeat="y in [] | range:0:number">3</th>
            <th class="ng-binding ng-scope" ng-repeat="y in [] | range:0:number">4</th>
            <th class="ng-binding ng-scope" ng-repeat="y in [] | range:0:number">5</th>
            <th class="ng-binding ng-scope" ng-repeat="y in [] | range:0:number">6</th>
            <th class="ng-binding ng-scope" ng-repeat="y in [] | range:0:number">7</th>
        </tr>
    </thead>
    <tbody>
        <tr class="ng-scope" ng-repeat="pokayoke in pokayokes | filter : search track by $index">
            <td class="ng-binding">1</td>
            <td>obrazek</td>
            <td ng-repeat="column in pokayoke" class="11_14_1167"><p class="ng-binding">11_14_1167</p></td>
            <td ng-repeat="column in pokayoke" class="C,M,Y,K,P286,P218"><p class="ng-binding">C,M,Y,K,P286,P218</p></td>
            <td ng-repeat="column in pokayoke" class="x"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="x"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="C"><p class="ng-binding">C</p></td>
            <td ng-repeat="column in pokayoke" class="C"><p class="ng-binding">C</p></td>
            <td ng-repeat="column in pokayoke" class="x"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="x"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="x"><p class="ng-binding">x</p></td>

        </tr>
        <tr class="ng-scope" ng-repeat="pokayoke in pokayokes | filter : search track by $index">
            <td class="ng-binding">2</td>
            <td>obrazek</td>
            <td ng-repeat="column in pokayoke" class="11_14_1171"><p class="ng-binding">11_14_1171</p></td>
            <td ng-repeat="column in pokayoke" class="C,M,Y,K,P286,P7465"><p class="ng-binding">C,M,Y,K,P286,P7465</p></td>
            <td ng-repeat="column in pokayoke" class="x"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="x"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="Y"><p class="ng-binding">Y</p></td>
            <td ng-repeat="column in pokayoke" class="Y"><p class="ng-binding">Y</p></td>
            <td ng-repeat="column in pokayoke" class="Y"><p class="ng-binding">Y</p></td>
            <td ng-repeat="column in pokayoke" class="Y"><p class="ng-binding">Y</p></td>
            <td ng-repeat="column in pokayoke" class="Y"><p class="ng-binding">Y</p></td>

        </tr>
    </tbody>
</table>

生成上表的代码:

<table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>Lp.</th>
                <th>image</th>
                <th>Article name:</th>
                <th>Colors in article:</th>
                <th ng-repeat="y in [] | range:0:number">{{$index+1}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="pokayoke in pokayokes | filter : search track by $index">
                <td>{{$index+1}}</td>
                <td>obrazek</td>
                <td ng-repeat="column in pokayoke" class="{{ column }}"><p>{{ column }}</p></td>
            </tr>
        </tbody>
</table>

现在我需要从类的数据库中获取值，这些值从第 5 列开始到最后一列，并在每个类中添加 rgb 背景样式。 我不知道整个过程在 Angular 或 php 站点中的位置。 如果有人写信给我，步骤应该是什么样子，我会非常高兴...:)

编辑 2015 年 10 月 29 日: 数据库表的打印屏幕:

1. 我从其中获取数据的表:

2. 我类的表:

以及一行的示例代码，我最终想要的样子:

<tr class="ng-scope" ng-repeat="pokayoke in pokayokes | filter : search track by $index">
            <td class="ng-binding">1</td>
            <td>obrazek</td>
            <td ng-repeat="column in pokayoke" class="11_14_1167"><p class="ng-binding">11_14_1167</p></td>
            <td ng-repeat="column in pokayoke" class="C,M,Y,K,P447,P218"><p class="ng-binding">C,M,Y,K,P447,P218</p></td>
            <td ng-repeat="column in pokayoke" class="P447" style="background-color: rgb(39,46,32)"><p class="ng-binding">P447</p></td>
            <td ng-repeat="column in pokayoke" class="P447" style="background-color: rgb(39,46,32)"><p class="ng-binding">P447</p></td>
            <td ng-repeat="column in pokayoke" class="K" style="background-color: rgb(0,0,0)"><p class="ng-binding">K</p></td>
            <td ng-repeat="column in pokayoke" class="K" style="background-color: rgb(0,0,0)"><p class="ng-binding">K</p></td>
            <td ng-repeat="column in pokayoke" class="x" style="background-color: rgb(255,255,255)"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="x" style="background-color: rgb(255,255,255)"><p class="ng-binding">x</p></td>
            <td ng-repeat="column in pokayoke" class="x" style="background-color: rgb(255,255,255)"><p class="ng-binding">x</p></td>
</tr>

该类不是必需的，我只需要添加内联样式。

Answer 1

我正在简化它，假设您将颜色名称保存在数据库中，假设您有一个像这样的简单对象:

  $scope.items = [{
    "color":"red",
    "value":12
  },{
    "color":"green",
    "value":12
  },{
    "color":"blue",
    "value":12
  },{
    "color":"pink",
    "value":12
  }];

然后在 HTML 中你可以添加像这样的内联样式，

<table>
      <tr ng-repeat="item in items" style="background:{{item.color}}"><td>{{item.value}}</td></tr>
</table>

希望这能解决您的问题。

Demo