Question

我的目标是让表格显示如下所示的数据。我设法在顶部和第一个垂直柱（公司）上显示年份，但如何获得每个公司的产量数据并在每一行显示？ PS。我对角度很新。

<table>
<thead>
   <tr><th></th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th></tr>
</thead>
<tbody>
   <tr><td>ABC</td><td>2.03</td><td>2.22</td><td>2.44</td><td>2.57</td><td>2.69</td></tr>
   <tr><td>DEF</td><td>1.08</td><td>1.14</td><td>1.19</td><td>1.25</td><td>1.32</td></tr> 
</tbody>
</table>

JSON

{  
    "years":[  
        2015,
        2016,
        2017,
        2018,
        2019
    ],
    "yields":[  
        {  
            "company":"ABC",
            "yield":{  
                "2015":2.03000,
                "2016":2.22000,
                "2017":2.44000,
                "2018":2.57000,
                "2019":2.69000
            }
        },
        {  
            "company":"DEF",
            "yield":{  
                "2015":1.08000,
                "2016":1.14000,
                "2017":1.19000,
                "2018":1.25000,
                "2019":1.32000
            }
        }
    ]
}

HTML

<table data-ng-controller="dividendController as divd">
  <thead>
      <tr>
          <th></th>
          <th data-ng-repeat="y in year">{{y}}</th>
      </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="c in yields">
      <td>{{c.company}}</td>
      <td data-ng-repeat="n in divYield">{{n}}</td>
    </tr>
  </tbody>
</table>

CONTROLLER

    (function (angular) {
     'use strict';
     angular.module('example', [])
    .controller('dividendController', function ($scope, $http) {
        $http.get("api/myapi/myexample")
        .success(function (response) {
            $scope.year = response.years;
            $scope.yields = response.yields;

            $scope.divYieldList = [];
            $scope.company = [];
            angular.forEach(response.yields, function (obj, index) {
                $scope.company.push(obj.company);

                $scope.divYield = [];
                angular.forEach(obj.yield, function (yld, index) {
                    $scope.divYield.push(yld);
                });

                $scope.divYieldList.push($scope.divYield);
        });
        });

    });
   })(window.angular);

Answer 1

 <div ng-init='TesData={"years":[2015,2016,2017,2018,2019],"yields": [{"company":"abc","yield":{"2015":2.03000,"2016":2.22000,"2017":2.44000,"2018":2.57000,"2019":2.69000} },{"company":"def","yield":{"2015":1.08000,"2016":1.14000,"2017":1.19000,"2018":1.25000,"2019":1.32000}}]};'>
                        <table>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th data-ng-repeat="y in TesData.years">{{y}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="c in TesData.yields">

                                    <td>{{c.company}}</td>
                                    <td data-ng-repeat="n in c.yield">{{n}}</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

ng-repeat将数据添加到表行

1 个答案: