AngularJS将类添加到<td>，它由ngRepeat从数据库生成动态
I have problem with my table, because I have no idea how do it...
I have table in html which is generate dynamic by Angular with data from database and now I needed add some styles to td element. Style which I need add, I have get from database (background-color in rgb), but I don't know how?
Below is code which is generate by Angular in 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>
Code which generate the table above:
<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>
And now I need get values from database of classes which start from 5th column to the last and to each add background style in rgb. I don't know where this whole procedure make... in the angular or php site. I will be very pleased if someone write me how should be step looks like... :)
EDIT 29.10.15: Print screens of database tables:
Table where I get data to the table:
Table where I have classes:
And the example code of one row, how I want to look like in the end:
<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>
The class is not required, I only need add the style inline.
I am simplifying it assuming you have the color name saved in the DB, say you have a simple obj like this:
$scope.items = [{
"color":"red",
"value":12
},{
"color":"green",
"value":12
},{
"color":"blue",
"value":12
},{
"color":"pink",
"value":12
}];
Then in the HTML you can add inline style like this,
<table>
<tr ng-repeat="item in items" style="background:{{item.color}}"><td>{{item.value}}</td></tr>
</table>
Hope this solves your problem.