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

<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>

发布了137 篇原创文章 · 获赞 123 · 访问量 25万+

猜你喜欢

转载自blog.csdn.net/lz20120808/article/details/96431324