Примените цвет на элемент, используя пользовательские фильтры в AngularJs

Question

Примените цвет на элемент, используя пользовательские фильтры в AngularJs

0

У меня есть массив объектов:

      [
          {
            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 и применять настраиваемый фильтр, чтобы, если приоритет объекта высокий или критический, он должен отображаться красным цветом, и если приоритет является средним или низким, он должен быть отображается желтым цветом. Возможно ли это?

Kishore L 21 июль 2016, в 15:55

Источник

Теги:

angularjs

2 ответа

1

Вы можете добиться этого с помощью CSS. например <tr class="{{ item.priority }}"> some content</tr>

добавит соответствующие классы. И где-то в вашей таблице стилей

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

Justice O. 21 июль 2016, в 11:48

0

Да, я могу сделать это таким образом, но я хочу использовать пользовательский фильтр и проверить приоритет внутри пользовательского фильтра, а из пользовательского фильтра я должен изменить цвет.
Kishore L 21 июль 2016, в 13:41

Ещё вопросы

Да, я могу сделать это таким образом, но я хочу использовать пользовательский фильтр и проверить приоритет внутри пользовательского фильтра, а из пользовательского фильтра я должен изменить цвет.

NTP · Accepted Answer · 2016-07-21T11-20-00.000Z

Вы можете создавать разные столбцы с разными стилями и изменять их видимость в соответствии со значением приоритета

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

Да, я могу сделать это таким образом, но есть ли способ сделать это с помощью пользовательского фильтра?