When the user clicks the Continue to Billing button in the shipping view, the billing view appears, allowing the user to then enter billing information. The billing view, shown in Listing 28.17, provides a series of input fields to input the billing information.
The billing template code is similar to the shipping template code, with the addition of a few new fields. The Card radio buttons to select the credit card are bound to the customer.billing[0].cardtype
value in the scope. When you change the radio button selection, the model also changes.
The values for the <select>
drop-down options come from simple arrays defined in the scope and are bound to the customer.billing[0]
data as well. For example, the following lines use an array of number-named months in the scope and bind the <select>
value to the customer.billing[0].expiremonth
value in the scope:
<select ng-model="customer.billing[0].expiremonth"
ng-options="m for m in months"></select>
One other thing to note is that the CCV value is passed to the verifyBilling(ccv)
function for verifying the credit card. The CCV number is not supposed to be stored locally on the customer site, so it is kept separate here and passed as its own parameter. Figure 28.6 shows the rendered billing view.
01 <div id="shippingContainer">
02 <h2>Card Info: </h2>
03 <label>Card</label>
04 <input type="radio" ng-model="customer.billing[0].cardtype"
05 value="Visa"> Visa
06 <input type="radio" ng-model="customer.billing[0].cardtype"
07 value="Amex"> Amex
08 <input type="radio" ng-model="customer.billing[0].cardtype"
09 value="MasterCard"> MasterCard
10 <br><label>Name on Card</label>
11 <input type="text" ng-model="customer.billing[0].name" />
12 <br><label>Card Number</label>
13 <input type="text" ng-model="customer.billing[0].number" />
14 <br><label>Expires</label>
15 <select ng-model="customer.billing[0].expiremonth"
16 ng-options="m for m in months"></select>
17 <select ng-model="customer.billing[0].expireyear"
18 ng-options="m for m in years"></select>
19 <label>Card CCV</label>
20 <input class="security" type=text ng-model="ccv" />
21 <h2>Billing Address:</h2>
22 <label>Name</label>
23 <input type="text"
24 ng-model="customer.billing[0].address[0].name" />
25 <br><label>Address</label>
26 <input type="text"
27 ng-model="customer.billing[0].address[0].address" />
28 <br><label>City</label>
29 <input type="text"
30 ng-model="customer.billing[0].address[0].city" />
31 <br><label>State</label>
32 <input type="text"
33 ng-model="customer.billing[0].address[0].state" />
34 <br><label>Zipcode</label>
35 <input type="text"
36 ng-model="customer.billing[0].address[0].zip" />
37 <hr>
38 <div>
39 <span class="button" ng-click="verifyBilling(ccv)">
40 Verify Billing
41 </span>
42 <span class="button" ng-click="setContent('products.html')">
43 Continue Shopping
44 </span>
45 </div>
46 </div>