i have angular code @ plunkr
this not school test or anything. it's own trial , experiment front-end processing of angularjs, please feel free me.
the code contains 2 ng-repeats divs, children parent controller. 2 ng-click somehow intertwine , go wary in behaviors. tried different toggle functions togglelaptopchoice,toggletvchoice can't them work properly.
problems:
1- listing of products: purchasing 2 tvs list them in laptop portion.
2- tv products overwrote laptop products.
1&2 coupling , decoupling issue. also, how bind {{laptop.product}}, {{television.product}} ng-click label? should ng-click @ label or @ input itself?
3- how bind handling fee, totals update automatically on changing of fee? (i sort of thinking adding directive kinda want 2 ctrls handle instead of requiring service).
4- have handled scopes well? provide me better ways handle totals (totalization|sum calculation)
5- further suggestions optimize sample code? more flexibility, clarity , less useful abstraction.
perhaps, further develop quantity each product. purchase check become mean drop product(s) out of cart.
thank much.
<div ng-form name="orderform" ng-controller= "shoppinglistctrl 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 trigger validation on ng-show "orderform.fee_input" --> <br> <br> <div ng-controller= "merchandiselistctrl 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 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 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 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 scope of <strong>merchandiselistctrl</strong>________________ </div> <br> ______________now <strong>outside scope</strong>, it's shoppinglist scope now______________ <br>this <i>{{access.child}}</i> <br> <br> <span style='color:gray'>formula total: total = (total of selected laptops + total of selected televisions)*((100+tax)/100) +handling_fee</span> <br> <strong>shopping @ {{sl.market}}, total cart <span ng-if="sl.count"> ( {{sl.count}} items ) </span> {{ sl.total | currency:"usd$ ":2}}</strong> shopping cart checkout: <br> <div ng-if="ml.products"> <ul ng-repeat="product in ml.products"> <li>{{$index+1}}) {{product}}</li> </ul> <br> user interactive, selected data can further proceeded through form submit button back-end processing. </div> </div>
i resolved questions 1,2 & 3 (simple $watch job). see plukr test result.
the selected laptop , tv products arrays, makes more sense push them new array instead of attempt objects merging.
4 & 5 pending advice , help. also, how bind product name checkbox? clicking on asus toggling checkbox too.
Comments
Post a Comment