Ich möchte die Werte mit verschiedenen Farben unterscheiden. Hier ist eine grobe Vorstellung davon, was ich machen möchte. Ich konnte es für einen Knopf tun, aber nicht in einer Tabelle. Wenn die Werte aus der Datenbank abgerufen werden, möchte ich eine Hintergrundfarbe gemäß den Werten von diary.level platzieren. Differenzieren des verschiedenen Ergebnisses durch Hintergrundfarbe

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>

Quelle

2016-08-04 sxxxxxxx

Nicht sicher, was Sie fragen. Was funktioniert nicht? Irgendwelche Fehler? – Andrej

Die Codes, die ich im DataController platziert habe, funktionieren nicht. Ich habe ein Bild der Endergebnisse, die ich möchte, aktualisiert. – sxxxxxxx

schreiben eine Hilfsfunktion, die für jedes Element in einem Tagebuch Liste aufgerufen werden kann.

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

}

Quelle

2016-08-04 07:16:09

Beispiel - http://jsfiddle.net/9mkxmwow/ –

Differenzieren des verschiedenen Ergebnisses durch Hintergrundfarbe

Health.js

data.html

Antwort

Verwandte Themen