使用AngularJs中的自定义过滤器在项目上应用颜色

Question

我有一个对象数组：

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

我想使用ng-repeat在表格中显示此数据，并应用自定义过滤器，如果对象的优先级为高或严重，则应显示为红色，如果优先级为中等或低，它应该以黄色显示。它甚至可能吗？

Answer 1

您可以创建具有不同样式的不同列，并根据优先级值

更改其可见性

<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>

或者如果您想要自定义过滤器，您可以创建过滤器并在其中设置其类

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

并在你的HTML中

<table>
<tr ng-repeat=" item in items | filter:filterPriority">
<td>
    <span class="{{item.class}}"></span>
</td>                           
</tr>

Answer 2

您可以使用CSS实现此目的。例如 <tr class="{{ item.priority }}"> some content</tr>

会添加适当的类。在样式表中的某个地方

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