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

Paypal button submit multiple items at once with AngularJS

本文关键字：一次 提交 项目 按钮 AngularJS Paypal      更新时间：2023-09-26

我有一个带有自定义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="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 中的第一个项目

问题不在ng repeat中。根据您的数据结构，它是正确的。我会改变你将数据添加到购物车的方式。目前，无论用户是否选择特定尺寸的商品，您都会将所有"商品"尺寸推到购物车中，而您只是使用ng类来隐藏数量为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}}">

不过，我强烈建议您看看如何优化购物车功能。有一本非常好的书叫ProAngularJS。我似乎记得这本书使用的主要例子是通过创建一个网上商店一步一步来完成的。您可能只想为示例代码获取它。它肯定会帮助你简化你所拥有的，为购物车设置服务，并使用自定义指令，例如购物车下拉菜单。

您的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!">
相关文章：