Angular - 我可以将两个数组分开并在 ng-repeat 中使用它们吗？

Question

首先，这是这个问题的延伸：Angularjs map array to another array

目前，我有两个作用域：

$scope.products = [
  {id: 001, name: "prod 1", ...},
  {id: 002, name: "prod 2", ...},
  {id: 003, name: "prod 3", ...},
  {id: 004, name: "prod 4", ...},
  {id: 005, name: "prod 5", ...}
]

$scope.cart = {
  products: [001,002]
  ...
}

$scope.products 包含所有可用产品的列表以及产品信息，而$scope.cart.products 包含添加到购物车的 ID 列表。

上面的答案解释了如何将两个数组合并在一起，但是，我想将它们分开并在两者之间创建一种映射。是否可以？中继器中的自定义过滤器是这里的最佳选择，还是有一种内置的方式来做这个？感谢您的任何建议

编辑

过滤器：

filter('mapProducts', function($filter) {
  return function(products, ids) {
    var result;
    result = [];
    $filter('filter')(products, function(p) {
      if (ids.indexOf(p.id) !== -1) {
        return result.push(p);
      }
    });
    return result;
  };
});

在中继器中：

<div ng-repeat="product in products | mapProducts:cart.products">

Answer 1

不创建新数组不会给您带来太多好处。您可以使用 Angular 过滤器来“映射”结果，这可能比在控制器中做同样的事情更干净，但在幕后 Angular 实际上只是创建一个新的子数组。即使您制作了自定义过滤器，最终您也会创建一个新数组。

  angular.module('myApp').
  filter('idNumber', function() {
    return function(products,idNumbers) {
      var newArray= [];
      newArray = products.filter(function(p) {
        return idNumbers.find(function(i) {
          return i == p.id;
        });
      })
      return newArray;
    }
  });

另外，如果您使用过滤器的视图版本：

ng-repeat="product in products | myFilter: cart.products"

可能会影响性能，具体取决于您的阵列有多大：

过滤器可以应用在视图模板中，带有 {{ctrl.array | filter:'a'}}，它将对“a”进行全文搜索。但是，在视图模板中使用过滤器将重新评估每个摘要的过滤器，如果数组很大，这可能会很昂贵。

这意味着您需要在控制器中使用过滤器：

var newArray = $filter($scope.products, 'myFilter', cart.products)

这也意味着您将创建一个新数组。

Answer 2

您可以让$scope.cart.products 成为对$scope.products 中对象的引用数组：

$scope.products = [
  {id: 001, name: "prod 1", ...},
  {id: 002, name: "prod 2", ...},
  {id: 003, name: "prod 3", ...},
  {id: 004, name: "prod 4", ...},
  {id: 005, name: "prod 5", ...}
];

$scope.cart = {
  products: []
};

$scope.addProduct = function(product) {
  $scope.cart.products.push(product);
}

可以看到它们是同一个对象引用：

$scope.addProduct($scope.products[1]);

// Returns true
$scope.cart.products[0] === $scope.products[1]