文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Paypal REST API和AngularJS复制Paypal按钮

问使用Paypal REST API和AngularJS复制Paypal按钮
EN

Stack Overflow用户

提问于 2018-03-06 23:37:08

回答 1查看 328关注 0票数 0

我正在构建一个单页应用程序，在那里贝宝按钮是从一个按钮(添加产品)点击生成的ng-点击。

我面临的问题是，如果用户点击这个按钮几次，应用程序会一个接一个地生成几个按钮。

这很可能发生，因为用户可能会单击按钮，但随后在完成购买之前返回并添加额外的产品。

如何在添加新按钮之前删除所有现有按钮？

该函数如下所示：

$scope.formulari = function(){
  paypal.Button.render({

      env: 'production', // Or 'sandbox'
      locale: 'es_ES',

      style: {
          label: 'paypal',
      ...

单击几下后，我的初始HTML按钮<a id="paypal-button"></a>如下所示：

<a id="paypal-button">
    <div id="xcomponent-paypal-button-6d3dcbc0c4" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-46823018c3" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-41aad29e14" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-48d3247535" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
</a>

angularjs

paypal

paypal-rest-sdk

回答 1

Stack Overflow用户

发布于 2018-03-07 19:11:51

在点击时生成一个按钮可能不是你想要使用AngularJs结构的方式。

获取此信息的角度方法如下所示(代码片段下面的解释)：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.articles = ['PC', 'Playstation', 'Xbox'];
  $scope.cart = [];

  $scope.addArticleToCart = function(article) {
    $scope.cart.push(article);
  }

  $scope.clearCart = function() {
    $scope.cart = [];
  }

  $scope.doPaypalThings = function() {
    //REST API stuff
  }
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="article in articles">
      <button ng-click="addArticleToCart(article)">
        {{article}}
      </button>
    </div>

    <br>

    <div ng-show="cart.length > 0">
      <button id="paypal-button" ng-click="doPaypalThings()">
        Paypal
      </button>
    </div>

    <br>

    <div>
      In cart:
    </div>
    <div ng-repeat="item in cart">
      {{item}}
    </div>

    <br>

    <div>
      <button ng-click="clearCart()">
        Clear cart
      </button>
    </div>
  </div>
</body>

</html>

使用这种方法，按钮总是存在的，只是在满足ng-show中的要求之前是不可见的。在该示例中，要求购物车中有物品。您将注意到，一旦不再满足要求，该按钮将再次消失。

ng-show的另一个对立面是ng-hide，它可以以同样的方式使用：

ng-hide="cart.length == 0"或ng-hide="cart.length < 1

如果你坚持使用你当前的方法，你可以查看这个答案 ，尽管它不是Angular。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49134600

复制

相似问题

问使用Paypal REST API和AngularJS复制Paypal按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Paypal REST API和AngularJS复制Paypal按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Paypal REST API和AngularJS复制Paypal按钮
EN