jquery - angularjs中如何根据表格数据中的值修改样式。

浏览:38日期:2023-01-01

问题描述

<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>这是我目前实现的方法,希望大家能给出更多的方法

问题解答

回答1:

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

回答2:

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

相关文章: