Anwenden von Farbe auf den Punkt benutzerdefinierte Filter in AngularJS mit

Question

ich ein Array von Objekten haben:

 [ 
      { 
      idPriority: 1, 
      priority: "Critical", 
      isChecked: 0 
      }, 
      { 
      idPriority: 2, 
      priority: "High", 
      isChecked: 0 
      }, 
      { 
      idPriority: 3, 
      priority: "Medium", 
      isChecked: 0 
      }, 
      { 
      idPriority: 4, 
      priority: "Low", 
      isChecked: 0 
      } 
     ] 

Ich möchte in einer Tabelle mit ng-repeat diese Daten anzuzeigen und einen benutzerdefinierten Filter, so dass, wenn die Priorität gelten Ist das Objekt hoch oder kritisch, sollte es in roter Farbe angezeigt werden. Wenn die Priorität mittel oder niedrig ist, sollte es in gelber Farbe angezeigt werden. Ist es überhaupt möglich?

Answer 1

können Sie verschiedene Spalten erstellen mit verschiedenen Stilen und ihre Sichtbarkeit ändern entsprechend dem Wert des Prioritäts

<tr ng-repeat=" item in items"> 
    <td> 
     <span class="style for red" ng-show="item.priority=='Critical'">Critical</span> 
     <span class="style for yellow" ng-show="item.priority=='High'">High</span> 
     <span class="style for green" ng-show="item.priority=='Medium'">Medium</span> 
    </td> 
</tr> 

oder wenn Sie einen benutzerdefinierten Filter möchten, können Sie einen Filter erstellen und legen sie seine Klasse in es

$scope.filterPriority = function (item) { 
    if (item.priorty == 'High') { 
     item.class = 'class for high'; 
    } 
    else if (item.priorty == 'Low') { 
     item.class = 'class for low'; 
    } 
    else { 
     item.class = 'default class'; 
    } 

    return true; 
}; 

und in Ihrem hTML

Answer 2

Sie können dies mit CSS erreichen. zum Beispiel <tr class="{{ item.priority }}"> some content</tr>

würde die entsprechenden Klassen hinzufügen. Und irgendwo in Ihrem Stylesheet

.Critical { color: red; } 
.High { color: blue; } 
.Medium { color: green; }