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

Posted 2023-02-22

【中文标题】Paypal按钮使用AngularJS一次提交多个项目

【英文标题】：Paypal button submit multiple items at once with AngularJS

【发布时间】：2015-09-18 14:54:08

【问题描述】：

我有一个带有自定义 cart 的 angularJS 应用程序，我正在尝试使用贝宝让用户一次结帐他们的整个 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="[e-mail]">
    <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" 
           >
  </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 中的第一项

【问题讨论】：

如果您得到任何东西，我会感到惊讶。 AngularJS 忽略隐藏的输入。

哦，我得到了 1 件带有价格和名称的商品.. 但它只是没有重复.. 我该如何解决你的想法？

啊...你没有绑定问题，问题是重复吗？

custCart 是什么样的？在上面的示例中，它是一个空数组，并且没有提示它是如何填充的。

是的，实际上我看到除了第一个项目之外的所有项目都没有出现

【参考方案1】：

问题不在于 ng-repeat。根据您的数据结构，它是正确的。我会改变您将数据添加到购物车的方式。目前，无论用户是否选择了该特定尺寸的商品，您都将所有“商品”尺寸推送到购物车，并且您只是使用 ng-class 隐藏数量为 0 的尺寸。对我来说没什么意义。

也就是说，您可以在视图中使用过滤器来过滤掉数量为 0 的项目。您现在所做的只是使用 CSS 隐藏这些值与使用过滤器之间的区别在于过滤器实际上不会为任何与过滤器不匹配的值生成任何 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。我似乎记得本书使用的主要示例是通过创建在线商店逐步进行的。您可能只想为示例代码获取它。它肯定会帮助您简化现有内容，为购物车设置服务并使用自定义指令，例如购物车下拉菜单。

【讨论】：

我这样做的方式是对的。这是我第一次在网上进行交易，我只是想自己弄清楚，所以我非常感谢这一点，我会看你提到的这本书。如果我有更多问题，可以给你发信息吗？

当然。实际上，我去年将在线票务系统与 PayPal 集成在一起，所以我知道它有时是多么令人生畏。祝你好运。

【参考方案2】：

你的 HTML

<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" 
           >

将其替换为：

<input type="submit" style="background:url(http://www.paypal.com/en_US/i/btn/x-click-but01.gif); width:100px; height:100px;" name="Submit" 
           >