javascript - 如何检查一个对象是否存在于数组中并在 AngularJS 中给它一个 ng 类

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 种水果。

在 View 中，我为每家商店展示了所有可用的水果，我想用红色突出显示那家商店中可用的水果(给出“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>

(灵感来自这个答案:How to check if something is in array from 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函数算法