Question

我有一个自定义cart的angularJS应用程序，我正在尝试使用paypal允许用户一次签出整个cart。

HTML

<main ng-controller="CheckoutCtrl" class="prototype-paypal">
  <h2 class="checkout-header">Checkout</h2>

  <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="upload" value="1">
    <input type="hidden" name="business" value="youremail@mail.com">
    <input type="hidden" name="currency_code" value="CAD">

    <div ng-repeat="item in custCart">
      <input type="hidden" name="item_name_{{$index}}" value="{{item.name}}" >
      <input ng-repeat="size in item.sizes track by $index" type="hidden" name="amount_{{$index}}"
               value="{{size.price}}">
    </div>

    <input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" 
           alt="Make payments with PayPal - it's fast, free and secure!">
  </form>

</main>

我认为我使用的是$index错误，这是我的数据：

$scope.custCart = [];    

$scope.templateItems = [
{
  name: 'First Item',
  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
  src: 'http://placehold.it/150x150.gif',
  type: 'Template',
  sizes: [
    {
      size: "Small",
      price: 3.99,
      text: "size of item sm more details more",
      numOrders: 0,
    },
    {
      size: "Medium",
      price: 5.99,
      text: "size of item md more details more",
      numOrders: 0,
    },
    {
      size: "Large",
      price: 7.99,
      text: "size of item lg more details more",
      numOrders: 0,
    },
    {
      size: "X-Large",
      price: 8.99,
      text: "size of item xl",
      numOrders: 0,
    },
    {
      size: "XX-Large",
      price: 10.99,
      text: "size of item xxl",
      numOrders: 0,
    }
    ]
},
{
  name: 'Second Item',
  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
  src: 'http://placehold.it/150x150.gif',
  type: 'Template',
  sizes: [
    {
      size: "Small",
      price: 3.99,
      text: "size of item sm ",
      numOrders: 0,
    },
    {
      size: "Medium",
      price: 5.99,
      text: "size of item md more details more",
      numOrders: 0,
    },
    {
      size: "Large",
      price: 7.99,
      text: "size of item lg more details more",
      numOrders: 0,
    }
    ],
},
{
  name: 'Third Item',
  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
  src: 'http://placehold.it/150x150.gif',
  type: 'Template',
  sizes: [
    {
      size: "Small",
      price: 3.99,
      text: "size of item sm ",
      numOrders: 0,
    },
    {
      size: "Medium",
      price: 5.99,
      text: "size of item md more details more",
      numOrders: 0,
    },
    {
      size: "Large",
      price: 7.99,
      text: "size of item lg more details more",
      numOrders: 0,
    }
    ],
},
{
  name: 'Fourth Item',
  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
  src: 'http://placehold.it/150x150.gif',
  type: 'Template',
  sizes: [
    {
      size: "Small",
      price: 3.99,
      text: "size of item sm ",
      numOrders: 0,
    },
    {
      size: "Medium",
      price: 5.99,
      text: "size of item md more details more",
      numOrders: 0,
    },
    {
      size: "Large",
      price: 7.99,
      text: "size of item lg more details more",
      numOrders: 0,
    }
    ],
}
];

问题是我的ng-repeat循环由于某种原因没有显示custCart

中的第一项

Answer 1

问题不在ng-repeat中。根据您的数据结构，它是正确的。我会改变您向购物车添加数据的方法。目前，无论用户是否选择特定大小的项目，您都将所有“项目”大小推送到购物车，而您只是使用ng-class来隐藏数量为0的大小。对我来说很有意义。

也就是说，您可以在视图中使用过滤器来过滤掉数量为0的项目。您现在正在使用CSS隐藏这些值并使用过滤器的区别在于filter实际上不会为任何与过滤器不匹配的值生成任何DOM元素。

所以你可以在你的控制器中做这样的事情：

$scope.greaterThan = function(prop, val){
    return function(item){
      return item[prop] > val;
    }
}

然后在你的重复中：

ng-repeat="size in item.sizes | filter: greaterThan('numOrders', 0) track by $index"

或者，您可以使用ngIf，它也不会呈现DOM元素，例如：

<input ng-repeat="size in item.sizes track by $index" ng-if="size.numOrders <= 0" type="hidden" name="amount_{{$index}}" value="{{size.price}}">

尽管如此，我强烈建议您先了解如何优化购物车功能。有一本非常好的书叫Pro AngularJS。我似乎记得，本书使用的主要例子是逐步创建一个在线商店。您可能只想获取示例代码。它肯定会帮助您简化您的工作，为购物车设置服务并使用自定义指令，例如购物车下拉菜单。

Answer 2

您的HTML

<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" 
           alt="Make payments with PayPal - it's fast, free and secure!">

将其替换为：

<input type="submit" style="background:url(http://www.paypal.com/en_US/i/btn/x-click-but01.gif); width:100px; height:100px;" name="Submit" 
           alt="Make payments with PayPal - it's fast, free and secure!">

Paypal按钮使用AngularJS一次提交多个项目

2 个答案: