比较Angular中NG重复项目的两个阵列和更改样式

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重复中迭代。

现在我还有另一个数组，例如

[152,292,422,1712].

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

请建议。

Answer 1

您可以使用NGCLASS指令。假设JSON被保存为食品清单，则该代码看起来像这样：

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

，在您的控制器中，您将制作一个相应的功能，如果ID在列表中，则返回true。在这里，您可以使用JavaScripts Indextof方法来确定。

Answer 2

假设'项目'是数组的名称，那么您的ng-repeat：

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

您可以使用ng-switch（或在此处）查看每个项目，然后将其分为可以不同的各个部分：

：

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

您明白了，但是请查看我链接的文档，他们可能会更好地解释它。