如何檢查對象是否存在於數組中並在AngularJS中為其提供ng-class

Question

在這里暴跌： https ://plnkr.co/edit/SRjkoo2mi5C2P1dVsYST ? p = preview

我總共有3種水果：

  $scope.fruits = [{
    _id: "3",
    name: "apple"
  }, {
    _id: "4",
    name: "orange"
  }, {
    _id: "5",
    name: "banana"
  }];

並且有2家商店：

  $scope.shops = [{
    name: "Tesco",
    _id: "1",
    fruits: [{
      _id: "3",
      name: "apple"
    }]
  },{
    name: "Waitrose",
    _id: "2",
    fruits: [{
      _id: "4",
      name: "orange"
    }]
  }];

如您所見，每個商店只有1個水果。

在該視圖中，我正在為每個商店顯示總計可用的所有水果，並且我要用紅色突出顯示，僅顯示該商店中可用的水果（給予“ class-1”類）。

我有以下內容，但無法正常工作：

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

（此答案的啟示： 如何檢查ng-class數組中是否包含某些內容 ）

Answer 1

假設每個商店只有一個水果，語法應為

 <div ng-class="shop.fruits[0].id.indexOf(fruit._id) === -1 ? 'class-1' : 'class-2'">{{fruit}}</div>

https://plnkr.co/edit/aTf0YClBXteXo01SOrBK?p=preview

更新的plnkr https://plnkr.co/edit/cnzjGWSIT86Q2VYa6aSM?p=preview

HTML

 <div ng-repeat="fruit in fruits" ng-class="checkFruit(shop, fruit) ? 'class-1' : 'class-2'">{{fruit}}</div>

JS

$scope.checkFruit = function(shop, oneFruit) {

for(var i = 0, m = shop.fruits.length; i < m; i++) {
  if(shop.fruits[i]._id === oneFruit._id) {
    return true;
  }
}
return false;

}

或者您可以使用underscoreJS編寫checkFruit函數算法

Answer 2

我不熟悉Angular，但有可能做到這一點嗎？

<div ng-class="shop.fruits.find(sf => sf._id === fruit._id) ? 'class-1' : 'class-2'">{{fruit}}</div>

Answer 3

根據您的情況，您可以輕松地為與商店相關的每個div添加特定的類名稱。 因此，您可以添加幾行css：

.shop-1 .fruit-item {background: red;}