javascript - Table row colour according to result - Stack Overflow

admin管理员组

文章数量:1333732

I am new to AngularJs I am getting json data which is in format:

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

I want to calculate each students marks and if marks is less than 40% then table row should be red else else should be green. I have tried. 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;} 

I am getting percentage but according to percentage I am not getting the row colour.

I am new to AngularJs I am getting json data which is in format:

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

I want to calculate each students marks and if marks is less than 40% then table row should be red else else should be green. I have tried. 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;} 

I am getting percentage but according to percentage I am not getting the row colour.

• javascript
• jquery
• angularjs

Share Improve this question Follow edited Apr 21, 2015 at 14:26 Tom 7,74011 gold badge2626 silver badges4949 bronze badges asked Apr 21, 2015 at 14:21 Roli AgrawalRoli Agrawal 2,46633 gold badges2424 silver badges2929 bronze badges 6

• 5 when new to angularjs it is very good to not use ANY jQuery – DrCord Commented Apr 21, 2015 at 14:23
• I actually don't see where jQuery is being used. – Nick Commented Apr 21, 2015 at 14:24
• 1 I think a lot of people confuse jQuery with Javascript. – Scottie Commented Apr 21, 2015 at 14:29
• Can't Jquery and AngularJS co exist? :) Haven't started using Angular but I'm using Jquery – Jared Teng Commented Apr 21, 2015 at 14:49
• @JaredT, Yes, however, you will run into a lot of Angular purists that say you should NEVER use jQuery and Angular together. I disagree. In theory it's a great concept. In reality, it just makes some things way easier to use jQuery. – Scottie Commented Apr 21, 2015 at 16:53

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 9

You need ngClass

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

Code

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

OR, From @RevanProdigalKnight ment

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

---

when calling function with ngIf, You don;t need string interpolation.

Use

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

instead of

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

Use ng-class

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

References:

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

ng-if will actually remove the row from the DOM if it's below 40%.

You'll want

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

As a side note, it's remended not to use functions in ng-repeats because performance can suffer significantly.

本文标签： javascriptTable row colour according to resultStack Overflow