Question

我是AngularJs的新手我正在获取格式为的json数据：

[
  {
    'StudentName':'abc',
    'maths':'0',
    'english':'0',
    'economics':'0',
  }
]

我想计算每个学生的分数，如果分数小于40％，那么表格行应该是红色，否则应该是绿色。我试过了。 HTML

<div ng-app="MyApp" ng-controller="con1"> 
  <table id="table1">
    <tr>
      <th>student Name</th>
      <th>History Marks</th>
      <th>Maths Marks</th>
      <th>Economics Marks</th>
      <th>Percentage</th>
    </tr>
    <tr ng-repeat="x in data" ng-if="{{co(per(x))}}" ng-class="pass">
      <td>{{x.StudentName}}</td>
      <td>{{x.maths}}</td>
      <td>{{x.economics}}</td>
      <td>{{x.english}}</td>
      <td>{{per(x)}}%</td>
    </tr>
  </table>

脚本

var app = angular.module('MyApp', []);
app.controller('con1', function ($scope, $http) {
    $http.get('/ajax/data').success(function (res) { $scope.data = res; });
    $scope.per = function (x) {
        avg = ((parseInt(x.maths) + parseInt(x.economics) + parseInt(x.english)) * 100) / 300;
        return avg;
    };
    $scope.co = function (x) { (x > 40) ? k = 1 : k = 0; return (k); }
});

CSS

.pass{background:green;}
.fail{background:red;}

我得到百分比，但根据百分比，我没有得到行颜色。

Answer 1

您需要ngClass

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态设置HTML元素上的CSS类。

代码的

ng-class='{ "pass" : co(per(x)) == 1, "fail" : co(per(x)) == 0 }'

或，来自@RevanProdigalKnight评论

ng-class="co(per(x)) ? 'pass' : 'fail'"

用ngIf调用函数时，你不需要字符串插值。

使用

ng-if="co(per(x))"

而不是

ng-if="{{co(per(x))}}"

Answer 2

使用ng-class

ng-class="{pass: per(x) >= 40, fail: per(x) < 40}"

参考文献：

Answer 3

ng-if实际上会删除DOM中的行，如果它低于40％。

你想要

<tr ng-repeat="x in data" ng-class="{ 'pass' : per(x) > 40 }">

作为旁注，建议不要在ng-repeats中使用函数，因为性能会受到很大影响。

根据结果表行颜色

3 个答案:

根据结果​​表行颜色

3 个答案:

根据结果表行颜色