HTML/CSS/JavaScript：如何根据数据更改表行的颜色

首先，我知道这可能是重复的，但我尝试了其他解决方案，但没有任何效果。无论如何，我有一个HTML表格：

<table class="table1">
        <tr>
            <th>Rank</th>
            <th>Name</th>
            <th>Picture</th>
            <th>Serial Number</th>
        </tr>
        <tbody class="tbody" >
            <tr class="bodyrow" ng-repeat="item in rank track by $index">
                <td>{{item}}</td>
                <td>{{name[$index]}}</td>
                <td> <img ng-src="{{img[$index]}}"/></td>
                <td>{{serialNumber[$index]}}</td>
            </tr>
        </tbody>

    </table>

等级
名称
图画
序列号
{{item}}
{{name[$index]}
{{serialNumber[$index]}

因此，排名可以是

基本

、

中等

、或

高级

。如果等级为

Basic

，则该条目的整行应为蓝色。如果排名为

Middle

，则该条目的行应为黄色，

Advanced

应使该行变为绿色。有人能帮忙吗？

标记（假设{item}}有排名名）：

---

查看文档：另外，它将有助于展示一些不起作用的解决方案。。这样我们就可以指出你的问题，而不是为你做所有的事情/你就不能把

{{item}}

放在你的

tr

类属性中，并根据类的样式来设置吗？我并不是专门寻找AngularJS解决方案。它也可以使用纯javascript或jquery。哇！好吧，我很笨。谢谢@iSuckAtProgramming在可能的情况下坚持使用角度解决方案，这就是为什么您要使用角度解决方案。@Quantastical尝试一下小提琴之类的东西，如果它不起作用，就把它放在这里。：）

<table class="table1">
    <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Picture</th>
        <th>Serial Number</th>
    </tr>
    <tbody class="tbody" >
        <tr class="bodyrow" ng-class="item" ng-repeat="item in rank track by $index">
            <td>{{item}}</td>
            <td>{{name[$index]}}</td>
            <td> <img ng-src="{{img[$index]}}"/></td>
            <td>{{serialNumber[$index]}}</td>
        </tr>
    </tbody>

</table>

.basic{background: blue}
.middle{background: yellow}
.advanced{background: green}