Строка таблицы цвета в соответствии с результатом

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> 

Script

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 позволяет динамически устанавливать классы CSS на HTML-элемента с помощью привязки данных выражение, представляющее собой все классы, которые будут добавлены.

Код

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

Ссылки:

1. How do I conditionally apply CSS styles in AngularJS?
2. What is the best way to conditionally apply a class?

Answer 3

нг-, если фактически будет удалить строку из DOM, если она ниже 40%.

Вы хотите

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

Как примечание стороны, рекомендуется не использовать функции в нг-повторов, поскольку производительность может существенно пострадать.