I have my Angular code at Plunkr
This is not a school test or anything. It's my own trial and experiment with some front-end processing of AngularJS, so please feel free to help me.
The code contains two ng-repeats divs, children to a parent Controller. The two ng-click somehow intertwine and go wary in their behaviors. I tried with different toggle functions toggleLaptopChoice,toggleTVChoice but can't get them to work properly.
Problems:
1- Listing of products: purchasing 2 TVs would list them in Laptop portion.
2- TV products overwrote Laptop products.
1&2 are coupling and decoupling issue. also, how to bind {{laptop.product}}, {{television.product}} to the ng-click label? Should the ng-click be at label or at the input itself?
3- How to bind handling fee, so the Totals will update automatically on changing of the fee? (I sort of thinking about adding a Directive but kinda want the two Ctrls to handle everything instead of requiring an extra service).
4- Have I handled scopes well? Provide me better ways to handle Totals (totalization|sum calculation)
5- Further suggestions to optimize the sample code? more flexibility, clarity and less but useful abstraction.
Perhaps, further develop it with quantity for each product. The purchase check will become a mean to drop product(s) out of the cart.
Thank you very much.
<div ng-form name="orderForm" ng-controller= "shoppingListCtrl as sl">
<label for="">Configurate (backend) Handling fee: USD$ </label>
<input type="number" name="fee_input" ng-model="sl.fee" ng-init="sl.fee=7.50"/>
<span class="error" ng-show="orderForm.fee_input.$error.number">
Not valid number!</span>
<!-- need ng-form name="orderForm" in div to trigger validation on ng-show "orderForm.fee_input" -->
<br>
<br>
<div ng-controller= "merchandiseListCtrl as ml" style="border: 2px solid olive; padding:0 0 1em 1em">
<h3>Laptop List</h3>
<table>
<thead>
<tr>
<th>Product</th>
<th>Purchased</th>
<th>Price</th>
<th>Tax</th>
</tr>
</thead>
<tr ng-repeat="laptop in ml.laptops">
<td>{{laptop.product}}</td>
<td>
<!--<label for="laptopCheck" ng-click="$event.stopPropagation();"> http://stackoverflow.com/a/26962680/5828821-->
<label for="laptopCheck" ng-click="ml.toggleHandler(laptop, ml.laptops, ml.laptopTotal, sl.fee);">
<!--<input id="laptopCheck" type="checkbox" class="ng-pristine ng-valid" ng-click="ml.toggleSelection($event,laptop)" ng-model="laptop.purchased" ng-init="laptop.purchased=false">-->
<input id="laptopCheck" type="checkbox" ng-model="laptop.purchased">
</label>
</td>
<td>{{laptop.price}}</td>
<td>{{$parent.sl.tax}}</td>
</tr>
</table>
<!-- display the selection -->
Laptop count: {{ ml.laptopTotal.count }} units
<br>
<div ng-if="ml.laptopTotal.products">
<ul ng-repeat="product in ml.laptopTotal.products">
<li>{{$index+1}}) {{product}}</li>
</ul>
</div>
<br>
Price for selected laptops before tax: {{ml.laptopTotal.value | currency:"USD$ ":2 }}
<br>
Taxing info: {{ml.getTax()}} %
<br>
<h3>Television List</h3>
<table>
<thead>
<tr>
<th>Product</th>
<th>Purchased</th>
<th>Price</th>
<th>Tax</th>
</tr>
</thead>
<tr ng-repeat="television in ml.televisions">
<td>{{television.product}}</td>
<td>
<label for="televisionCheck" ng-click="ml.toggleHandler(television, ml.televisions, ml.televisionTotal, sl.fee);">
<input id="televisionCheck" type="checkbox" ng-model="television.purchased">
</label>
</td>
<td>{{television.price}}</td>
<td>{{$parent.sl.tax}}</td>
</tr>
</table>
TV count: {{ ml.televisionTotal.count }} units
<br>
<div ng-if="ml.televisionTotal.products">
<ul ng-repeat="product in ml.televisionTotal.products">
<li>{{$index+1}}) {{product}}</li>
</ul>
</div>
<br>
Price for selected televisions before tax: {{ml.televisionTotal.value | currency:"USD$ ":2 }}
<br>
Taxing info: {{ml.getTax()}} %
<br>
<label for="">$scope element: </label>{{access.child}}
<br>
_____________________________________________________________________________
<br>
<br>
<label for="">Grand Total: </label>{{ml.televisionTotal.altogether | currency:"USD$ ":2 }}
<br>
<br>
________________STILL INSIDE the scope of <strong>merchandiseListCtrl</strong>________________
</div>
<br>
______________NOW <strong>OUTSIDE that scope</strong>, it's shoppingList scope NOW______________
<br>This is a <i>{{access.child}}</i>
<br>
<br>
<span style='color:gray'>Formula for total: TOTAL = (total of selected laptops + total of selected televisions)*((100+tax)/100) +handling_fee</span>
<br>
<strong>Shopping at {{sl.market}}, the total for your cart <span ng-if="sl.count"> ( {{sl.count}} items ) </span> is {{ sl.total | currency:"USD$ ":2}}</strong>
Your shopping cart to checkout:
<br>
<div ng-if="ml.products">
<ul ng-repeat="product in ml.products">
<li>{{$index+1}}) {{product}}</li>
</ul>
<br>
The user interactive, selected data can be further proceeded through a form Submit button for back-end processing.
</div>
</div>
