文章/答案/技术大牛

发布

社区首页 >问答首页 >根据背景颜色区分不同的结果

问根据背景颜色区分不同的结果
EN

Stack Overflow用户

提问于 2016-08-04 15:01:53

回答 1查看 54关注 0票数 1

我想用不同的颜色来区分这些值。这是我想做的粗略的想法。我可以在一个按钮上做，但不能在桌子上做。当从数据库中检索值时，我希望根据diary.level值设置背景颜色。

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>

javascript

html

node.js

strongloop

apic

回答 1

Stack Overflow用户

发布于 2016-08-04 15:16:10

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

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

}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38760515

复制

相似问题

问根据背景颜色区分不同的结果
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据背景颜色区分不同的结果EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据背景颜色区分不同的结果
EN