1

我想用不同的颜色来区分这些值。这是我想要做的一个粗略的想法。我能够为按钮做到这一点，但不能在表格中做到这一点。从数据库中检索值时，我想根据 diary.level 值放置背景颜色。我预期的最终结果样本

健康.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";
            }
    }])

数据.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>
4

1 回答 1

0

编写一个可以为日记列表中的每个项目调用的辅助函数。

<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'};
     }

}
于 2016-08-04T07:16:09.593 回答