Using ng-repeat data to populate another function

Question

Using ng-repeat data to populate another function

I am looking to transfer the details of an order shown in an ng-repeat to another function within my controller. Currently, it works for the first item in the array. How can I extend this functionality to display any order currently visible on the page?

When the detail button is clicked, the necessary URL is generated. I want this URL to be created for whichever order is being displayed on the detail page at that time. While it currently only works with the first item in the array, how can I make it work for other orders as well?

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

app.js


// Unique content will replace this code block

detail.html


// Unique content will replace this code block

JSON data


// Unique content will replace this code block

javascript angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

Ensure to integrate the button within the ng-repeat loop and transmit the order to your pay() scope function so that it can subsequently be passed to onPay() without relying on the fixed var order = $scope.orders[0];

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> <-- reposition this and send 'order'
</ion-item>

Controller

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

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

Answer 2

Ensure to integrate the button within the ng-repeat loop and transmit the order to your pay() scope function so that it can subsequently be passed to onPay() without relying on the fixed var order = $scope.orders[0];

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> <-- reposition this and send 'order'
</ion-item>

Controller

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

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

Using ng-repeat data to populate another function

Answer №1

Similar questions

Controlling the behavior of React components in response to updates

The API Key containing a colon is causing a TypeError when trying to parse it because forEach is not recognized as a function

What benefits can be gained from utilizing the beforeEach function within Jest testing?

How can a PrivateRoute component effectively handle waiting for an asynchronous response?

react-query: QueryOptions not functioning as expected when utilizing userQueries()

Transmitting JSON information to a Spring Controller

Error in processing large XML data: socket disconnect during express request

Is there a way to dynamically access BEM-style selectors using CSS modules?

Tips for applying ng-class to elements in AngularJS that need to be styled both conditionally

The validator function is causing an error with the 'lowerCase()' method resulting in an undefined output

Display React elements on the web page

prevent unnecessary duplicate database queries for generating metadata in the upcoming 13 or 14 instances

Update the styling for the second list item within a specified unordered list class instantaneously

Ways to retrieve a grandchild element of a specific element using its tag name

ng-model assigns the value to the select

Unable to access this context in Firefox debugger after promise is returned

I encountered an issue when attempting to execute an action as I received an error message indicating that the dispatch function was not

Preserving CSS styling while loading an HTML page with InnerHTML

The class "pagination pagination-lg" from the link https://angular-ui.github.io/bootstrap/#/pagination seems to be malfunctioning in Bootstrap 4

What is the best way to dynamically add the 'required' attribute to an input field?