Angular Js表基于Year的格式

时间:2018-05-01 02:08:20

标签: javascript angularjs json html-table angularjs-ng-repeat

我收到的回复数据为:

 revenueTableData= [
          {
              "revenueSource": "Customer",
              "revenueYear": "2014",
              "revenueAmount": "5555"
          },
          {
              "revenueSource": "Driver",
              "revenueYear": "2014",
              "revenueAmount": "5555"
          },
          {
              "revenueSource": "Insurance",
              "revenueYear": "2014",
              "revenueAmount": "2300"
          },
          {
              "revenueSource": "Customer",
              "revenueYear": "2015",
              "revenueAmount": "8888"
          },
          {
              "revenueSource": "Driver",
              "revenueYear": "2015",
              "revenueAmount": "1111"
          },
          {
              "revenueSource": "Insurance",
              "revenueYear": "2015",
              "revenueAmount": "6666"
          },
          {
              "revenueSource": "Customer",
              "revenueYear": "2016",
              "revenueAmount": "2222"
          },
          {
              "revenueSource": "Driver",
              "revenueYear": "2016",
              "revenueAmount": "2222"
          },
          {
              "revenueSource": "Insurance",
              "revenueYear": "2016",
              "revenueAmount": "5555"
          }
      ] 

我想根据年份和来源对收入金额进行排序:

Like This

这就是我的尝试:

 <table>
                  <thead>
                    <tr>
                      <th>
                        <b>&nbsp;</b>
                      </th>
                      <th ng-repeat="i in revenueTableData | unique:'revenueYear' ">{{i.revenueYear}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="i in revenueTableData | unique :'revenueSource'">
                      <th> {{i.revenueSource}}</th>
                      <td>{{i.revenueAmount}}</td>
                    </tr>
                  </tbody>
                </table>

And and displays data like this

删除唯一过滤器将在表格中垂直显示所有详细信息

我希望这种格式的表格

<tbody >
                  <tr>
                      <th>Customer</th>
                        <td>Rs.11M</td>
                        <td>Rs.10M</td>
                        <td>Rs.9M</td>
                    </tr>
                  <tr>
                  <th>Insurance</th>
                    <td>Rs.11M</td>
                    <td>Rs.10M</td>
                    <td>Rs.9M</td>
                </tr>
                <tr>
                  <th>Franchise</th>
                    <td>Rs.10M</td>
                    <td>Rs.22M</td>
                    <td>Rs.11M</td>
                </tr>


              </tbody>

我无法实现 如果有人能帮助我,真的会有所帮助 提前致谢

当前的JSfiddle https://jsfiddle.net/abhishekbhat004/eq75dn9z/1/

0 个答案:

没有答案