HW-Pricing

HW-Pricing (angular)

by Mayank Dixit

HTML

<div ng-controller="mainCtrl" class="hwpane">
    <div class="summery">
        <div ng-repeat="cat in categories">
            <div ng-repeat="(cat_id, cat_data) in cat" class="">
                <div ng-repeat="prods in cat_data.products">
                    <div ng-repeat="(prods_id, prods_data) in prods" class="products">	<span ng-if="prods_data.qty > 0 || accCheck(cat_id, prods_id)">
								 {{prods_id}} 
								<span ng-if="prods_data.qty">
									<span>({{prods_data.qty}}) </span>
	<span class="close" ng-click="clearCount(cat_id, prods_id)"> &times;</span>
</span>
                        <div ng-repeat="acc in prods_data.accessories">
                            <div ng-repeat="(acc_id, acc_data) in acc" class="accessory" ng-if="acc_data.qty">> {{acc_id}} ({{acc_data.qty}}) <span class="close" ng-click="clearCount(cat_id, prods_id, acc_id)"> &times;</span> 
                            </div>
                        </div>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div ng-repeat="cat in categories">
        <div ng-repeat="(cat_id, cat_data) in cat" class="cat_pane">{{cat_id}}: {{cat_data.name}}
            <div ng-repeat="prods in cat_data.products">
                <div ng-repeat="(prods_id, prods_data) in prods" class="products">> {{prods_id}}
                    <input type="text" ng-model="prods_data.qty" ng-model-onblur prod-id="{{prods_id}}" cat-id="{{cat_id}}" />
                    <div ng-repeat="acc in prods_data.accessories">
                        <div ng-repeat="(acc_id, acc_data) in acc" class="accessory">> {{acc_id}}
                            <input type="text" ng-model="acc_data.qty" ng-model-onblur prod-id="{{prods_id}}" acc-id="{{acc_id}}" cat-id="{{cat_id}}" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.close {
		    color: red;
		    font-weight: bold;
		    cursor: pointer;
		    font-size: x-large;
		    position: absolute;
		}
		.products {
		    margin-left: 10px;
		    color: blue;
		}
		.accessory {
		    margin-left: 20px;
		    color: green;
		}
		.hwpane {
		    color: gray;
		}
		.cat_pane {
		    font-size: 20px;
		    position: relative;
		    float: left;
		    border: 2px solid lightgreen;
		    margin: 2px;
		}

JavaScript

var safeApply;
safeApply = function (scope) {
    if (!scope.$$phase) {
        scope.$apply();
    }
}
angular.module("myApp", []).
controller("mainCtrl", function ($scope) {
    scope = $scope;
    $scope.clearCount = function (cat_id, prods_id, acc_id) {
        if (!acc_id) {
            $scope.categories[0][cat_id]["products"][0][prods_id]["qty"] = 0;
        } else {
            $scope.categories[0][cat_id]["products"][0][prods_id]["accessories"][0][acc_id]["qty"] = 0;
        }
    }
    $scope.accCheck = function (cat_id, prods_id) {
        var _acc_obj = $scope.categories[0][cat_id]["products"][0][prods_id]["accessories"][0];
        for (acc_id in _acc_obj) {
            if ($scope.categories[0][cat_id]["products"][0][prods_id]["accessories"][0][acc_id]["qty"] > 0) {
                return true;
            }
        }
        return false;
    }
    $scope.categories = [{
        "cat_1": {
            "name": "Categoty 1",
                "products": [{
                "prod_11": {
                    "name": "product 11",
                        "qty": 0,
                        "accessories": [{
                        "acc_111": {
                            "name": "accessory 111",
                                "qty": 0,
                                "data": "data 111"
                        },
                            "acc_112": {
                            "name": "accessory 112",
                                "qty": 0,
                                "data": "data 112"
                        },
                            "acc_113": {
                            "name": "accessory 113",
                                "qty": 0,
                                "data": "data 113"
                        }
                    }]
                },
                    "prod_12": {
                    "name": "product 12",
                        "qty": 0,
                        "accessories": [{
                        "acc_121": {
  ...