include angularjs object in php form

Question

I am using angularjs ng-cart in my PHP webapp.

Here you will see basic table for displaying products, I need to include the total cart price within my payment form to complete flow with braintree.

Previously I was using a session based cart and checkout so was able to $_POST['amount'] from a read only input value for the amount.

Like so, <input type="text" name="amount" value="<?php echo $amount?>" readonly/>

and $_POST on server.php like so:

$result = Braintree_Transaction::sale(array( "amount" => $_POST["amount"], 'paymentMethodNonce' => $nonce, 'customer' => array( 'firstName' => $_POST["firstName"], 'lastName' => $_POST["lastName"], 'email' => $_POST["email"], 'phone' => $_POST["phone"] ),

However, now I am using angular and PHP I am not sure how to include the cart total which is {{ ngCart.totalCost() | currency:"€" }} within my form submission.

   <script type="text/ng-template" id="template/ngCart/summary.html">
            <div class="row">

                <div class="col-md-6">{{ ngCart.getTotalItems() }}
                    <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize>
                    <br />{{ ngCart.totalCost() | currency:"€" }}
                </div>
            </div>
        </script>

        <script type="text/ng-template" id="template/ngCart/cart.html">
            <div class="alert alert-warning" role="alert" ng-show="ngCart.getTotalItems() === 0">
                Your cart is empty
            </div>
            <div class="table-responsive col-lg-12" ng-show="ngCart.getTotalItems() > 0">
                <table class="table table-striped ngCart cart">
                    <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>Quantity</th>
                        <th>Amount</th>
                        <th>Total</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr ng-show="ngCart.getTax()">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>Tax ({{ ngCart.getTaxRate() }}%):</td>
                        <td>{{ ngCart.getTax() | currency:"€" }}</td>
                    </tr>
                    <tr ng-show="ngCart.getShipping()">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>Shipping:</td>
                        <td>{{ ngCart.getShipping() | currency:"€" }}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>Total:</td>
                        <td>{{ ngCart.totalCost() | currency:"€" }}</td>
                    </tr>
                    </tfoot>
                    <tbody>
                    <tr ng-repeat="item in ngCart.getCart().items track by $index">
                        <td><span ng-click="ngCart.removeItemById(item.getId())" class="fa fa-times cart-product-remove"></span></td>

                        <td>{{ item.getName() }}</td>
                        <td><span class="fa fa-minus cart-products-mines" ng-class="{'disabled':item.getQuantity()==1}"
                                  ng-click="item.setQuantity(-1, true)"></span>&nbsp;&nbsp;
                            {{ item.getQuantity() | number }}&nbsp;&nbsp;
                            <span class="fa fa-plus cart-products-plus" ng-click="item.setQuantity(1, true)"></span></td>
                        <td>{{ item.getPrice() | currency:"€"}}</td>
                        <td>{{ item.getTotal() | currency:"€" }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </script>

Answer 1

You can use a hidden input field for that:

<input type="hidden" name="amount" value="{{ ngCart.totalCost() | currency:'€' }}" />