Table Summary Row with Collapse and Expand in AngularJS

Question

I want to create my table look like this below by using angularJS. I did not find any idea so that i can solve my problem with efficient way. Please give me any idea to create this table by using angularJS.

To create this table i want to use this object.

var dateList = [
            {
                Date: "28-12-2014", Qty: 500,
                CountryList: [
                {
                    Country: "Bangladesh", Qty: 200,
                    ColorList: [{ Color: "Red", Size: "M", Qty: 100 }, { Color: "Green", Size: "S", Qty: 100 }]
                },
                {
                    Country: "India", Qty: 300,
                    ColorList: [{ Color: "Red", Size: "M", Qty: 150 }, { Color: "Green", Size: "S", Qty: 150 }]
                }]
            },
            {
                Date: "29-12-2014", Qty: 1000,
                CountryList: [
                {
                    Country: "Bangladesh", Qty: 500,
                    ColorList: [{ Color: "Red", Size: "M", Qty: 300 }, { Color: "Green", Size: "S", Qty: 200 }]
                },
                {
                    Country: "India", Qty: 500,
                    ColorList: [{ Color: "Red", Size: "M", Qty: 200 }, { Color: "Green", Size: "S", Qty: 300 }]
                }]
            },
            {
                Date: "30-12-2014", Qty: 2000,
                CountryList: [
                {
                    Country: "Bangladesh", Qty: 1200,
                    ColorList: [{ Color: "Red", Size: "M", Qty: 700 }, { Color: "Green", Size: "S", Qty: 500 }]
                },
                {
                    Country: "India", Qty: 800,
                    ColorList: [{ Color: "Red", Size: "M", Qty: 300 }, { Color: "Green", Size: "S", Qty: 500 }]
                }]
            }
        ];

Idea Need

1. How can i create collapse and expand control which is containing left side of table.
2. At the right side I have mentioned some calculation. Qty field will be calculating by this way.
3. The color will be change according summary calculation.
4. Qty field will be textbox. If i change any qty from front end then summary qty will be calculate by text change of quantity textbox.

Answer 1

I found one solution while searching on net, Hope this is what you are finding. I have also similar task to do. following are the link you can refer. This is not coded by me.I got this link from SO answer Multi-level tables (inside another if clicked)
JSFiddle 1

 $scope.selectTableRow = function (index, storeId) {
        if (typeof $scope.dayDataCollapse === 'undefined') {
            $scope.dayDataCollapseFn();
        }

        if ($scope.tableRowExpanded === false && $scope.tableRowIndexExpandedCurr === "" && $scope.storeIdExpanded === "") {
            $scope.tableRowIndexExpandedPrev = "";
            $scope.tableRowExpanded = true;
            $scope.tableRowIndexExpandedCurr = index;
            $scope.storeIdExpanded = storeId;
            $scope.dayDataCollapse[index] = true;
        } else if ($scope.tableRowExpanded === true) {
            if ($scope.tableRowIndexExpandedCurr === index && $scope.storeIdExpanded === storeId) {
                $scope.tableRowExpanded = false;
                $scope.tableRowIndexExpandedCurr = "";
                $scope.storeIdExpanded = "";
                $scope.dayDataCollapse[index] = false;
            } else {
                $scope.tableRowIndexExpandedPrev = $scope.tableRowIndexExpandedCurr;
                $scope.tableRowIndexExpandedCurr = index;
                $scope.storeIdExpanded = storeId;
                $scope.dayDataCollapse[$scope.tableRowIndexExpandedPrev] = false;
                $scope.dayDataCollapse[$scope.tableRowIndexExpandedCurr] = true;
            }
        }

    };

JSFiddle 2

Answer 2

1. Use ng-show: https://docs.angularjs.org/api/ng/directive/ngShow on each expanded/collapsed row to do this
2. Use a function which performs calculation: $scope.total = function() { return $scope.val1 + $scope.val2 };
3. Use ng-class https://docs.angularjs.org/api/ng/directive/ngClass ng-class="{ 'positive' : $scope.total() > 0 }
4. Use ng-model https://docs.angularjs.org/api/ng/directive/ngModel <input type="text" ng-model="quantity" /> then use this in your calculated function $scope.quantity

The html table would be something like:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Date</th>
      <th>Country</th>
      <th>Color</th>
      <th>Size</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat-start="date in DateList">
      <td>{{date.ExpandedSymbol}}</td>
      <td>{{date.Date}}</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="text" ng-model="date.Qty"/></td>
    </tr>
    <tr ng-repeat-start="country in CountryList" ng-show="date.IsExpanded">
      <td>{{country.ExpandedSymbol}}</td>
      <td>{{Date}}</td>
      <td>{{country.Country}}</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="text" ng-model="country.Qty"/></td>
    </tr>
    <tr ng-repeat-end ng-repeat="color in ColorList" ng-show="country.IsExpanded">
      <td>(-)</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>{{color.Color}}</td>
      <td>{{color.Size}}</td>
      <td><input type="text" ng-model="color.Qty"/></td>
    </tr>
    <tr ng-repeat-end ng-hide="true"></tr>
  </tbody>
</table>