AngularJS中带有折叠和展开的表格摘要行

Question

我想使用 angularJS 创建如下所示的表格。我没有找到任何想法，以便我可以用有效的方式解决我的问题。请给我任何想法来使用 angularJS 创建这个表。

要创建这个表，我想使用这个对象。

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 }]
                }]
            }
        ];

创意需要

1. 如何创建包含表格左侧的折叠和展开控件。
2. 在右侧我提到了一些计算。数量字段将以这种方式计算。
3. 颜色会根据汇总计算变化。
4. 数量字段将是文本框。如果我从前端更改任何数量，那么汇总数量将通过数量文本框的文本变化来计算。

Answer 1

我在网上搜索时找到了一种解决方案，希望这就是您所找到的。我也有类似的任务要做。以下是您可以参考的链接。这不是我编码的。我从 SO 回答 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. 在每个展开/折叠的行上使用 ng-show: https://docs.angularjs.org/api/ng/directive/ngShow 来执行此操作
2. 使用执行计算的函数：$scope.total = function() { return $scope.val1 + $scope.val2 };
3. 使用 ng-class https://docs.angularjs.org/api/ng/directive/ngClass ng-class="{ 'positive' : $scope.total() > 0 }
4. 使用 ng-model https://docs.angularjs.org/api/ng/directive/ngModel <input type="text" ng-model="quantity" /> 然后在你的计算函数中使用它 $scope.quantity

html 表格类似于：

<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>