将ng-repeat数据传递到另一个函数

时间:2016-06-13 14:14:09

标签: javascript angularjs angularjs-scope angularjs-ng-repeat

我希望将ng-repeat中显示的订单的详细信息传递给控制器​​中的另一个功能。我让它使用我的数组中的第一项。如何展开以显示该页面上的任何订单?

当您单击详细信息按钮时,它会创建所需的URL,我需要创建当前在详细信息页面上显示的任何订单。使用数组中的第一项,是否可以将其扩展为其他订单?

https://plnkr.co/edit/nASmvcPakxKpRXDsfKnW?p=catalogue

app.js

  // Ionic Starter App

  // angular.module is a global place for creating, registering and   retrieving Angular modules
  // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
  // the 2nd parameter is an array of 'requires'
  angular.module('starter', ['ionic','ngCordova'])

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {



      if(window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('tabs', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
      })
      .state('tabs.home', {
        url: '/home',
        views: {
          'home-tab' : {
           templateUrl: 'templates/home.html'
          }
        }
      })
      .state('tabs.list', {
        url: '/list',
        views: {
          'list-tab' : {
           templateUrl: 'templates/list.html',
           controller: 'ListController'
          }
        }
      })
      .state('tabs.detail', {
        url: '/list/:aId',
        views: {
          'list-tab' : {
           templateUrl: 'templates/detail.html',
           controller: 'ListController'
          }
        }
      })

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/tab/home');

  })

  .controller('ListController', ['$scope', '$http', '$state','$cordovaBluetoothSerial', '$window', '$location', function($scope, $http, $state, $cordovaBluetoothSerial, $window, $location) {
          $http.get('js/aboDATAONLY.json').success(function(data) {
            $scope.orders = data;
            $scope.whichorder = $state.params.aId;

          })

          $scope.orders = [];

           function onPay() {
           var itemsArr = [];
           var invoice = {};
           var myItems = {};
           var myItem = {};
           var order = $scope.orders[0];

           myItem['name'] = order.bkev_name;
           myItem['description'] = "A robotic ball that can be controlled via apps";
           myItem['quantity'] = bkor_seatcount;
           myItem['unitPrice'] = order.bkor_subtotal;
           myItem['taxRate'] = '0.0';
           myItem['taxName'] = 'Tax';
           itemsArr.push(myItem);
           myItems['item'] = itemsArr;

           invoice['itemList'] = myItems;
           invoice['paymentTerms'] = 'DueOnReceipt';
           invoice['currencyCode'] = 'GBP';
           invoice['discountPercent'] = '0';
           invoice['merchantEmail'] ='email@email.com';
           invoice['payerEmail'] = 'foo@bar.com';

           var returnUrl = order.bkor_seatcount;
           var retUrl = encodeURIComponent(returnUrl + "?{result}?Type={Type}&InvoiceId={InvoiceId}&Tip={Tip}&Email={Email}&TxId={TxId}");
           //var pphereUrl = "paypalhere://takePayment/?returnUrl={{returnUrl}}&invoice=%7B%22merchantEmail%22%3A%22{{merchantEmails}}%22,%22payerEmail%22%3A%22{{payerEmails}}%22,%22itemList%22%3A%7B%22item%22%3A%5B%7B%22name%22%3A%22{{name}}%22,%22description%22%3A%22{{description}}%22,%22quantity%22%3A%221.0%22,%22unitPrice%22%3A%22{{price}}%22,%22taxName%22%3A%22Tax%22,%22taxRate%22%3A%220.0%22%7D%5D%7D,%22currencyCode%22%3A%22{{currency}}%22,%22paymentTerms%22%3A%22DueOnReceipt%22,%22discountPercent%22%3A%220.0%22%7D";
           var pphereUrl = "paypalhere://takePayment/v2?returnUrl=" + retUrl;
           pphereUrl = pphereUrl + "&accepted=cash,card,paypal";
           pphereUrl = pphereUrl + "&step=choosePayment";
           pphereUrl = pphereUrl + '&invoice=' + escape(JSON.stringify(invoice));
           console.log(pphereUrl);

           return pphereUrl;

           }

          $scope.pay = function () {
          var url = onPay();
          window.open(url, "_system");
          }
  }]);

detail.html

    <ion-header-bar class="bar-dark">
            <h2 class="title">Order Detail</h1>
    </ion-header-bar>
            <ion-view>
                <ion-content class="has-subheader">
                <ion-list class="list-inset">
                <ion-item class="item-text-wrap"
                    ng-repeat="order in orders | filter: { bkor_user: whichorder }">

                <h1>Production Name: {{order.bkev_name}}</h1>
                <h3>Seatcount: {{order.bkor_seatcount}}</h3>
                <h1>Order Subtotal: £{{order.bkor_subtotal}}</h1>
                </ion-item>
                <button class="button button-block button-dark" ng-click="pay();">Pay Here</button>
                </ion-list>
                </ion-content>
            </ion-view>

JSON数据

        [
        {
        "bkor_status": "A",
        "bkor_datedmy": "08-02-2016",
        "bkor_event": "34",
        "bkor_user": "4028",
        "bkev_name": "U2 Tribute",
        "bkor_seatcount": "5",
        "bkor_paymethod": "H",
        "bkpay_short": "Cash",
        "bkpay_status": "A",
        "bkor_paid": "Y",
        "bkor_payamount": "44.00",
        "bkor_paiddatedmy": "08-02-2016",
        "bkor_delivery": "N",
        "bkdel_short": "Given",
        "bkor_sent": "N",
        "bkor_sentdatedmy": null,
        "bkor_subtotal": "44.00",
        "bkor_bookingfee": "0.00",
        "estCardFee": "2.00",
        "bkor_handling": "0.00",
        "bkor_discount": "0.00",
        "bkor_adjustment": "0.00"
        },
        {
        "bkor_status": "A",
        "bkor_datedmy": "16-02-2016",
        "bkor_event": "35",
        "bkor_user": "5001",
        "bkev_name": "Fleetwood Mac Tribute",
        "bkor_seatcount": "3",
        "bkor_paymethod": "H",
        "bkpay_short": "Card",
        "bkpay_status": "A",
        "bkor_paid": "Y",
        "bkor_payamount": "28.00",
        "bkor_paiddatedmy": "08-02-2016",
        "bkor_delivery": "N",
        "bkdel_short": "Given",
        "bkor_sent": "N",
        "bkor_sentdatedmy": null,
        "bkor_subtotal": "28.00",
        "bkor_bookingfee": "0.00",
        "estCardFee": "2.00",
        "bkor_handling": "0.00",
        "bkor_discount": "0.00",
        "bkor_adjustment": "0.00"
        }
        ]

1 个答案:

答案 0 :(得分:1)

移动ng-repeat循环内的按钮并将订单传递到pay()范围功能,然后您可以将其传递给onPay()而不使用硬编码的var order = $scope.orders[0]; < / p>

HTML

<ion-item class="item-text-wrap" 
          ng-repeat="order in orders | filter: { bkor_user: whichorder }">
    <h1>Production Name: {{order.bkev_name}}</h1>
    <h3>Seatcount: {{order.bkor_seatcount}}</h3>
    <h1>Order Subtotal: £{{order.bkor_subtotal}}</h1>
    <button class="button button-block button-dark" ng-click="pay(order);">Pay Here</button> <-- move this here and pass 'order'
</ion-item>

控制器

function onPay(order) {
    var itemsArr = [];
    var invoice = {};
    var myItems = {};
    var myItem = {};
    // var order = $scope.orders[0]; <-- remove this
    [ ... ]
}

$scope.pay = function (order) {
    var url = onPay(order); <-- pass order
    window.open(url, "_system");
}