Differentiating the different result by background colour

Question

I want to differentiate the values using different colours. Here's a rough idea of what i want to do. I was able to do it for a button but not in a table. When the values are retrieved from the database I want to place a background colour according to the diary.level values.

Health.js

    angular
  .module('app')
  .controller('TrackingController', ['$scope', 'Diary', '$state', function($scope, Diary, $state) {
    $scope.diaries = [];

    $scope.submitForm = function() {
      Diary
        .upsert({
          date: $scope.diary.date,
          taken: $scope.diary.taken,
          level: $scope.diary.level
        })
        .$promise
        .then(function() {
          $state.go('data');
        });
    };
  }])

    .controller('DataController', ['$scope', 'Diary', function ($scope, Diary) {
        $scope.diaries = Diary.find();

            if($scope.diary.level == "1-3.8") {
            $scope.buttonClass = "background-color:lightgreen";
            }
            else if ($scope.diary.level == "4-7") {
                $scope.buttonClass = "background-color:tomato";
            }
            else if ($scope.diary.level == "7.2-10.0") {
                $scope.buttonClass = "background-color:purple";
            }
            else {
                $scope.buttonClass = "background-color:yellow";
            }
    }])

data.html

<section>
<body>

<table style="width:90%"  align="center">
  <tr>
    <th>Date</th>
    <th>Type</th>
    <th>Level</th>
  </tr>
  <tr ng-repeat="d in diaries">
    <td>{{d.date}}</td>
    <td>{{d.taken}}</td>
    <td style={{buttonClass}}>{{d.level}}</td>
  </tr>
</table>
</body>
</section>

Not sure what you're asking. What's not working? Any errors? — Andrej, Aug 04 '16 at 07:07
The codes that I placed in the DataController is not working. I updated a pic of the end results that I want. — sxxxxxxx, Aug 04 '16 at 07:11

Mohankumar Balakrishnan · Answer 1 · 2016-08-04T07:56:21.210

write a helper function which can be called for each item in a diaries list.

<section>
<body>

<table style="width:90%"  align="center">
  <tr>
    <th>Date</th>
    <th>Type</th>
    <th>Level</th>
  </tr>
  <tr ng-repeat="d in diaries">
    <td>{{d.date}}</td>
    <td>{{d.taken}}</td>
    <td ng-style="getbuttonClass(d);">{{d.level}}</td>
  </tr>
</table>
</body>
</section>


.controller('DataController', ['$scope', 'Diary', function ($scope, Diary) {
        $scope.diaries = Diary.find();
    if(d.level == "1-3.8") {
          return {'background-color':'lightgreen'};
     }else if (d.level == "4-7") {
          return {'background-color':'tomato'};
     }else if (d.level == "7.2-10.0") {
         return {'background-color':'purple'};
     }else {
         return {'background-color':'yellow'};
     }

}

Differentiating the different result by background colour

Health.js

data.html

1 Answers1