代码之家  ›  专栏  ›  技术社区  ›  Nick

角度-我可以保持两个数组分开并在ng重复中使用它们吗?

  •  1
  • Nick  · 技术社区  · 9 年前

    首先,这是这个问题的延伸: 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">
    
    2 回复  |  直到 9 年前
        1
  •  2
  •   Pop-A-Stash    9 年前

      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)
    

        2
  •  1
  •   Frank Modica    9 年前

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