ng-repeat 按现有数组值过滤

Question

所以我正在使用一个基本的产品类别模型来解决过滤问题，但我不知道如何从数组中的一个对象中提取属性值，同时重复另一个对象。

范围内的类别数组的简化版本如下所示。我可以使用前面的指令输出他们的名字，结果符合预期：

[{
    "_id": "TY76",
    "name": "Planes"
}, {
    "_id": "887T",
    "name": "Trains"
}, {
    "_id": "A0K4",
    "name": "Autos"
}]

<p ng-repeat="category in product.categories "> {{ category.name }}</p>

这里是一个简化的产品，也在范围内，可能包含一个或多个类别的ID。在这种情况下，摇头娃娃既属于飞机又属于汽车：

{
    "_id": "9876",
    "name": "Bobble Head",
    "cats": "['TY76','A0K4']"
}

现在，这就是我遇到困难的地方。我需要用产品输出类别名称。我可以通过以下方式毫无问题地输出 ID：

<p ng-repeat="cat in product.cats ">{{ cat }}</p>

但这对最终用户没有用，但我不知道如何以这样的方式结束：

产品：摇头娃娃 | 类别：飞机、汽车

我没有为每个产品添加类别名称的自主权，我尝试了很多不同的过滤方法，但我认为我的问题措辞不正确，因为我在互联网上找不到太多关于此的内容。

有什么想法吗？

Answer 1

听起来您想建立一个从类别 ID 到类别名称的查找：

 var categories = [{
      "_id": "TY76",
      "name": "Planes"
  }, {
      "_id": "887T",
      "name": "Trains"
  }, {
      "_id": "A0K4",
      "name": "Autos"
  }];

  // build a category lookup id -> name
  var categoryLookup = {};
  categories.forEach(function(category) {
    categoryLookup[category._id] = category.name;
  });

这是一个完整的工作 fiddle：http://jsfiddle.net/02qadem7/1/

Answer 2

您可以创建一个 key-pair 对象，其中键是 id，值是类别的名称：

var categoriesArray = [{
    "_id": "TY76",
    "name": "Planes"
}, {
    "_id": "887T",
    "name": "Trains"
}, {
    "_id": "A0K4",
    "name": "Autos"
}];

$scope.categoriesMap = {};
categoriesArray.forEach(function(category) {
    $scope.categoriesMap[category._id] = category.name;
});

然后在您的视图中，您可以像这样访问类别名称：

<div ng-repeat="product in products">
    <strong>Product: </strong> {{product.name}} |
    <strong>Categories: </strong> <span ng-repeat="category in product.cats">
      {{categoriesMap[category]}}
    </span>
</div>

这是一个 plunkr：http://plnkr.co/edit/BpBcCizzU2Vh8VPniiHA?p=preview

Answer 3

我建议对类别数组使用自定义过滤器。

myApp.filter('byCategoryIds', function() {
    return function(categories, catIds) {
        return categories.filter(function(item) {
            return (catIds.indexOf(item._id) != -1);
        });
    };
});

然后你可以迭代发送 ids 数组的类别数组，如下所示：

<b>Product:</b> 
{{product.name}}; 
<b>Categories:</b> 
<span ng-repeat="cat in categories | byCategoryIds: product.cats">{{ cat.name }}, </span>

ng-repeat 按现有数组值过滤

ng-repeat filter by existing array values

javascript

angularjs

ng-repeat

angularjs-ng-repeat