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

Question

I have a json like this -
[{
"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"
}]
Which I am iterating in list with ng-repeat.
Now I have another array like
[152,292,422,1712].
Now how do I match the second array with the id of first array and change the style of those matching id's object in the view.
Please suggest.

Answer 1

You can use the ngClass directive.
The code would look something like this, assuming the Json is saved as foodList:
<div ng-repeat="food in foodList">
<div ng-class="{'classNameToWantedStyle': isIDInList(food.id)}">
{{food.name}}
</div>
</div>
and in your controller you would make a corresponding function that returns true if the id is in the list. Here you could use javascripts indextOf method to determine that.

Answer 2

Assuming 'items' is the name of the array, then you have your ng-repeat:
<div ng-repeat="item in items">
You can use ng-switch (or here) to look at each item then separate that out into sections that you can style differently:
<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>
You get the idea, but take a look at the documentation I linked, they might explain it better.