0

我的数据如下所示：

$scope.items =[{name: "item1", year : "2013", value : "100"},
    {name: "item1", year : "2012", value : "97"},
    {name: "item1", year : "2011", value : "98" },
    {name: "item2", year : "2013", value : "-7" },
    {name: "item2", year : "2012", value : "-6" },
    {name: "item2", year : "2011", value : "-5" },
    {name: "item3", year : "2013", value : "93" },
    {name: "item3", year : "2013", value : "91" },
    {name: "item3", year : "2012", value : "93" },
    {name: "item4", year : "2013", value : "-35" },
    {name: "item4", year : "2012", value : "-36" },
    {name: "item4", year : "2011", value : "-37" },
    {name: "item5", year : "2013", value : "58" },
    {name: "item5", year : "2012", value : "55" },
    {name: "item5", year : "2011", value : "56" }]

我想这样渲染数据：

Name  2011 2012 2013
item1   98   97  100
item2   -5   -6   -7
tiem3   93   91   93
item4  -35  -36  -37
item5   58   55   56

如何使用 Angular 实现这一目标？我了解 ngRepeat 的基础知识，但如果我执行 ng-repeat = "(key, value) in items" 然后 value.name 或 value.year 我有 15 个实例，而不仅仅是 item1 到 item 5 和 2011、2012 和2013 年。理想情况下，我希望有一个循环为列标题提供年份，另一个循环为我提供行的项目列表，然后我将按行、列引用值。有任何想法吗？

4

1 回答 1

1

您可以使用 _lodash 来获得帮助。

脚本：

var app = angular.module('app',[]);
app.controller('TestCtrl',['$scope',function($scope){
  var items =[{name: "item1", year : "2013", value : "100"},
      {name: "item1", year : "2012", value : "97"},
      {name: "item1", year : "2011", value : "98" },
      {name: "item2", year : "2013", value : "-7" },
      {name: "item2", year : "2012", value : "-6" },
      {name: "item2", year : "2011", value : "-5" },
      {name: "item3", year : "2013", value : "93" },
      {name: "item3", year : "2013", value : "91" },
      {name: "item3", year : "2012", value : "93" },
      {name: "item4", year : "2013", value : "-35" },
      {name: "item4", year : "2012", value : "-36" },
      {name: "item4", year : "2011", value : "-37" },
      {name: "item5", year : "2013", value : "58" },
      {name: "item5", year : "2012", value : "55" },
      {name: "item5", year : "2011", value : "56" }]


      $scope.headCells = _.keys(_.groupBy(items, function(item){ return item.year}));
      $scope.rows = _.groupBy(items, function(item){ return item.name});

      $scope.sortByYearProp = function(values){
        return _.sortBy(values, function(value){
          return value.year;
        });
      }

}])

html:

<table ng-controller="TestCtrl as test">
  <tr><th>Name</th><th ng-repeat="year in headCells">{{year}}</th></tt>
  <tr ng-repeat="(itemName, value) in rows"><td>{{itemName}}</td><td ng-repeat="obj in sortByYearProp(value)">{{obj.value}}</td></tr>
</table>

http://plnkr.co/edit/zvX6bsqicS5flD7BXzzN

于 2014-08-25T10:48:19.997 回答