Check out this Plunker for live demo: https://plnkr.co/edit/SRjkoo2mi5C2P1dVsYST?p=preview
We have a total of 3 fruits:
$scope.fruits = [{
_id: "3",
name: "apple"
}, {
_id: "4",
name: "orange"
}, {
_id: "5",
name: "banana"
}];
and there are 2 different shops:
$scope.shops = [{
name: "Tesco",
_id: "1",
fruits: [{
_id: "3",
name: "apple"
}]
},{
name: "Waitrose",
_id: "2",
fruits: [{
_id: "4",
name: "orange"
}]
}];
Each shop has only 1 fruit available, as you can see above.
When displaying the available fruits for each shop in the view, we want to highlight them in red by adding the "class-1" class.
The current code snippet provided below is not functioning as expected:
<div ng-repeat="shop in shops">
<div>{{shop.name}}</div>
<div ng-repeat="fruit in fruits" ng-class="shop.fruits.indexOf(fruit._id) !== -1 ? 'class-1' : 'class-2'">{{fruit}}</div>
</div>
(Referenced from this helpful answer: How to check if something is in array from ng-class)