angularjs 中利用 ng-class动态设置单元格不同样式

最新推荐文章于 2024-09-03 10:09:58 发布

原创最新推荐文章于 2024-09-03 10:09:58 发布 · 500 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #ng-class

前端专栏收录该内容

13 篇文章

订阅专栏

<style>
    .tr-light{
        background : #dcdcdc;
    }

    .red {
        color : red;
    }
</style>

<table  width="500">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
           <td>性别</td>
        </tr>
        <!--ng-class="{'tr-light':item.status==0}":当item.status==0时，tr-light值为true，为某行添加tr-light样式-->
        <tr ng-repeat="item in data" ng-class="{'tr-light':item.status==0}">
            <td>{{item.id}}</td>
            <!--ng-class="{red:item.age>30}":当item.age>30时，添加文字为红色样式-->
            <td ng-class="{red:item.age>30}">{{item.username}}</td>
             <td> {{item.age}}</td>
              <!--ng-class="{red: item.sex==‘1’}":当item.sex为1时，添加red样式-->
             <td ><span ng-class="{red: item.sex==‘1’}"> {{item.sex==0?"男":“女”}}</span></td>
        </tr>
    </table>