比较两个数组并更改 angular 中 ng-repeat 项的样式

Question

我有一个json这样的-

[{
    "id": "152",
    "name": "Accounting",
    "parent_id": "0",
    "created_at": "2016-12-20 18:10:57",
    "updated_at": "2016-12-20 18:10:57"
}, {
    "id": "292",
    "name": "Administration",
    "parent_id": "0",
    "created_at": "2016-12-20 18:37:29",
    "updated_at": "2016-12-20 18:37:29"
}, {
    "id": "422",
    "name": "Banquet",
    "parent_id": "0",
    "created_at": "2016-12-20 18:43:26",
    "updated_at": "2016-12-20 18:43:26"
}, {
    "id": "502",
    "name": "Engineering & Maintenance",
    "parent_id": "0",
    "created_at": "2016-12-20 18:47:12",
    "updated_at": "2016-12-20 18:47:12"
}, {
    "id": "622",
    "name": "Food & Beverage Admin",
    "parent_id": "0",
    "created_at": "2016-12-20 18:51:00",
    "updated_at": "2016-12-20 18:51:00"
}, {
    "id": "782",
    "name": "Food & Beverage Service",
    "parent_id": "0",
    "created_at": "2016-12-20 18:56:38",
    "updated_at": "2016-12-20 18:56:38"
}, {
    "id": "982",
    "name": "Front Office",
    "parent_id": "0",
    "created_at": "2016-12-20 19:05:04",
    "updated_at": "2016-12-20 19:05:04"
}, {
    "id": "1212",
    "name": "Housekeeping & Laundry",
    "parent_id": "0",
    "created_at": "2016-12-20 19:15:48",
    "updated_at": "2016-12-20 19:15:48"
}, {
    "id": "1352",
    "name": "HR",
    "parent_id": "0",
    "created_at": "2016-12-21 10:12:38",
    "updated_at": "2016-12-21 10:12:38"
}, {
    "id": "1462",
    "name": "IT",
    "parent_id": "0",
    "created_at": "2016-12-21 10:16:14",
    "updated_at": "2016-12-21 10:16:14"
}, {
    "id": "1492",
    "name": "Kitchen / Food Preparation",
    "parent_id": "0",
    "created_at": "2016-12-21 10:17:29",
    "updated_at": "2016-12-21 10:17:29"
}, {
    "id": "1712",
    "name": "Purchase",
    "parent_id": "0",
    "created_at": "2016-12-21 10:26:09",
    "updated_at": "2016-12-21 10:26:09"
}]

我正在使用 ng-repeat 在列表中迭代。

现在我有了另一个数组

[152,292,422,1712].

现在如何将第二个数组与第一个数组的 ID 匹配，并在视图中更改那些匹配 ID 的对象的样式。

求推荐。

Answer 1

假设 'items' 是数组的名称，那么你有你的 ng-repeat:

<div ng-repeat="item in items">

您可以使用 ng-switch (or here) 查看每个项目，然后将其分成您可以设置不同样式的部分：

<div ng-switch="item.id">
  <div ng-switch-when="152" class="152-class"></div>
  <div ng-switch-when="292" class="292-class"></div>
  <div ng-switch-default class="default-class"></div>
</div>

你明白了，但看看我链接的文档，他们可能会解释得更好。

Answer 2

您可以使用 ngClass 指令。代码看起来像这样，假设 Json 被保存为 foodList:

<div ng-repeat="food in foodList"> 
  <div ng-class="{'classNameToWantedStyle': isIDInList(food.id)}">
     {{food.name}}
  </div>
</div>

并且在您的控制器中，如果 id 在列表中，您将创建一个相应的函数 returns true。在这里你可以使用 javascripts indextOf 方法来确定。

比较两个数组并更改 angular 中 ng-repeat 项的样式

Compare two array and change styles of ng-repeat items in angular

angularjs

arrays

styles

ng-repeat