Question

我想通过使用angularJS创建我的表，如下所示。我没有找到任何想法，所以我可以用有效的方式解决我的问题。请给我任何想法，使用angularJS创建此表。 enter image description here

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

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

想法

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

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

在每个展开/展开的行上使用ng-show：https://docs.angularjs.org/api/ng/directive/ngShow来执行此操作
使用执行计算的函数：$scope.total = function() { return $scope.val1 + $scope.val2 };
使用ng-class https://docs.angularjs.org/api/ng/directive/ngClass ng-class="{ 'positive' : $scope.total() > 0 }
使用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>

在AngularJS中折叠和展开的表摘要行

2 个答案: