使用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重复在表中显示此数据，并应用自定义筛选器，以便如果对象的优先级是高的或关键的，则应以红色显示，如果优先级为中或低，则应以黄色显示。有可能吗？

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