Question

我使用Angular一直在努力解决这个问题。广泛的研究没有帮助

我正在尝试使用ng-repeat在HTML中复制电子表格样式数据。这是我想要的输出

＆＃13;

<table>
  <tr>
    <th>Account</th>
    <th>Jan</th> 
    <th>Feb</th>
    <th>Mar</th>
    <th>Apr</th>
    <th>May</th>
  </tr>
  <tr>
    <td>Sales</td>
    <td>50</td>
    <td>150</td>
    <td>250</td>
    <td>350</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Variable Costs</td>
    <td>150</td>
    <td>250</td>
    <td>150</td>
    <td>150</td>
    <td>250</td>
  </tr>
</table>

＆＃13;

我尝试构建表格有三个基本要素。

我可以使用ng-repeat构建列没问题。

我的Json看起来像这样

["Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"]

我的Angular看起来像这样帐户说明 {{value}}

我可以也使用Json

构建行

[＆＃34;销售＆＃34;，＆＃34;可变成本＆＃34;，＆＃34;广告＆＃34;]

      <tr ng-repeat="(header, value) in tm1rows" >
        <td> {{value }} 
    </td>

我正在努力的方法是在表格中显示特定帐户和月份组合的月份值。

我有一个json，看起来像这样。

[{
        "account2": "Sales",
        "month": "Jan",
        "TM1CubeValue": 9090
    },
    {
        "account2": "Variable Costs",
        "month": "Jan",
        "TM1CubeValue": null
    },
    {
        "account2": "Sales",
        "month": "Feb",
        "TM1CubeValue": null
    },
    {
        "account2": "Sales",
        "month": "Feb",
        "TM1CubeValue": 1999
    },
    {
        "account2": "Variable Costs",
        "month": "Feb",
        "TM1CubeValue": 99
    }
]

任何帮助都将不胜感激。

我已经提供了足够的细节，但如果需要，我可以提供更多。

Cheerio

Answer 1

使用问题评论中显示的修改数据。您应该使用 ng-repeat 和过滤器填充表格，并根据您的th和td元素中的'account2'类型进行过滤，如下所示：

  <table>
    <thead>
      <tr>
        <th>Account</th>
        <th ng-repeat="i in months">{{i}}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sales</td>
        <td ng-repeat="i in tableData | filter : {'account2' : 'Sales'}">{{i.TM1CubeValue}}</td>
      </tr>
      <tr>
        <td>Variable Costs</td>
        <td ng-repeat="i in tableData  | filter : {'account2' : 'Variable Costs'}">{{i.TM1CubeValue}}</td>
      </tr>
    </tbody>
  </table>

您需要将月份数组和实际数据放在 $ scope 变量中。

app.controller('MainCtrl', function($scope) {

  $scope.months = ["Jan",
    "Feb",
    "Mar",
    "Apr"];

  $scope.tableData = [{
    "account2": "Sales",
    "month": "Jan",
    "TM1CubeValue": 9090
  }, {
    "account2": "Variable Costs",
    "month": "Jan",
    "TM1CubeValue": null
  }];
});

我在此Plunker中提供了一个工作示例。

基于电子表格类型数据的角度js表

1 个答案: