jquery - angularjs中如何根据表格数据中的值修改样式。
为情所困
为情所困 2017-05-15 17:06:47
[AngularJS讨论组]
<p ng-controller='myCtrl'>
    <table>
    <tr ng-class='setStyle(item.grade)' ng-repeat='item in p'>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.grade }}</td>
    </tr>
    </table>
</p> 
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.p=[
            {'name':'rose', 'sex':'girl', 'grade':67},
            {'name':'rose', 'sex':'girl', 'grade':130},
            {'name':'jack', 'sex':'boy', 'grade':40},
            {'name':'mike', 'sex':'boy', 'grade':34},
            {'name':'tom', 'sex':'boy', 'grade':80},
            {'name':'tom', 'sex':'boy', 'grade':100},
            {'name':'john', 'sex':'boy', 'grade':120},
            {'name':'john', 'sex':'boy', 'grade':170},
            {'name':'john', 'sex':'boy', 'grade':270},
            {'name':'john', 'sex':'boy', 'grade':310}
        ];
        $scope.setStyle = function(args){
            if(args>0 && args<=50){
                return 'colorOneF'
            }
            else if(args>50 && args<=100){
                return 'colorTwoF'
            }
            else if(args>100 && args<=150){
                return 'colorThreeF'
            }
            else if(args>150 && args<=200){
                return 'colorFourF'
            }
            else if(args>200 && args<=300){
                return 'colorFiveF'
            }
            else{
                return 'colorSixF'
            }
        }
    });
</script>
这是我目前实现的方法,希望大家能给出更多的方法 
为情所困
为情所困

全部回复(2)
为情所困

使用ng-class指令,根据grade的值给td增加不同的class。ng-class

我想大声告诉你

用ng-class,还有不要在控制器里面写jq代码啊?ng是数据驱动的,少用DOM。必须用DOM操作的话,指令是你的天堂……

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号