动态建模从行到列的 Angular 数据 [英] modelling data from rows to columns in Angular dynamically
问题描述
我有这样的数据:
$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.理想情况下,我希望有一个循环为列标题提供年份,另一个循环为我提供行的项目列表,然后我将按行、列引用这些值.有什么想法吗?
How can I achieve this using Angular? I understand the basics of ngRepeat but if I do ng-repeat = "(key, value) in items" and then value.name or value.year I have 15 instances of them instead of just item1 to item 5 and 2011, 2012 and 2013. Ideally I would like to have one loop that gives the years for the columns headers and one other loop that gives me the list of items for the rows, then i would reference the values by rows, columns. Any ideas?
推荐答案
您可以使用 _lodash 获得帮助.
You can use _lodash to get helped.
脚本:
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
这篇关于动态建模从行到列的 Angular 数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!