NG-电网理货多列

我的数据有更多的字段比我的页面有列。 我需要总结的字段到列。

该JSON我有:

{ 'foo1' : 10, 'foo2' : 11, 'foo3' : 5, 'bar1' : 23, 'bar2' : 2, 'baz1' : 53, 'baz2' : 43 },{ 'foo1' : 11, 'foo2' : 41, 'foo3' : 31, etc. }

我想要的网格:

Foos Bars Baz's ---- ---- ----- 26 23 96 83 etc.

所以,我希望能够渲染领域,像这样的事情之前,添加多个项目:

columnDefs: [{ field: 'foo1 + foo2 + foo3', displayName: 'Foos' },{ field: 'bar1 + bar2', displayName: 'Bars' },{ field: 'baz1 + baz2', displayName: 'Baz's' }]

或者类似的东西

field : 'sumFields([foo1,foo2,foo3])' ... $scope.sumFields = function(fieldlist){ return fieldlist.reduce(function(pv, cv) { return pv + cv; }, 0)); };

当然,这一切都不伪代码的工作。

我想避免编写自定义CellTemplate每列。

我想,最坏的情况下,我可能呈现前整理数据......所以,

{ 'foo1' : 10, 'foo2' : 11, 'foo3' : 5, 'bar1' : 23, 'bar2' : 2, 'baz1' : 53, 'baz2' : 43, 'foos': 26, 'bars': 23, 'bazs': 96 },{ 'foo1' : 11, 'foo2' : 41, 'foo3' : 31, etc. }

[编辑]我补充说,包含我没有修改的网格样本plunker,和我想有一个描述:

http://plnkr.co/edit/x5abGuyvunBDes6h60eg?p=preview

我不希望看到猫或狗或其他动物,我希望看到某些类型的总和。 还有更多的这些列的比我秀,所以我在寻找一个更通用的解决方案,像

numAnimalsByType([arrayOfAnimals])

所以我可以这样做:

field: numAnimalsByType([dog,cat]) field: numAnimalsByType([fish,snail])

--------------解决方案-------------

接受挑战!

所以,我只是做了你的一个小的改动columnDefs字段值:

$scope.columnDefs = [{
field: 'it.foo1 + it.foo2 + it.foo3',
displayName: 'Foos'
}, {
field: 'it.bar1 + it.bar2',
displayName: 'Bars'
}, {
field: 'it.baz1 + it.baz2',
displayName: "Baz's"
}];

该aditional的目的it.是使其成为一个公式,所以我们可以EVAL它们:

<table>
<tr>
<th ng-repeat="column in columnDefs">{{column.displayName}}</th>
</tr>
<tr ng-repeat="it in entries">
<td ng-repeat="column in columnDefs">{{$eval(column.field)}}</td>
</tr>
</table>

而已! 简单而实用,看到它在这里工作:

http://plnkr.co/edit/DfRiqH18MpnFPa0jL2X6?p=preview

希望有所帮助。

分类:angularjs 时间:2012-01-01 人气:1
分享到:

相关文章

  • 角NG网/ UI电网实施视图中的观点的逻辑 2013-03-19

    我试图创建采用了棱角分明的js先进的功能(过滤器,重相当大,滚动,固定头,行格式,单元格格式)网格. 我已阅读以下电网文档. NG-网 NG-表 智能表 而且,NG-网格有许多功能和完善我们的要求. 但我想下面的两个选项也. 是否有可能从NG-电网实现? 格式化 我们在我的网格(约40)的列数. 最列数据的需要在细胞进行格式化. 对于如:添加链接,更改日期格式,减少了tooltip..etc内容的长度,在这里,我不能这样做里面的观点这个东西. 但是这一个是在NG表完美处理. 如果我做不到这点,那

  • Angularjs NG重复阵VS对象 2013-06-19

    我使用的NG-重复显示从端点进来的Atom feed的形式在视图中的数据. 此端点返回JSON如果接受标头是"应用/ JSON',JSON是从服务器端的XML由转换器创建,不幸的是,如果在原子响应一个条目然后在JSON的项目不是一个数组,如预期NG重复不起作用. 我有一个项目,我手工处理这个用计数器,然后根据该计数器和NG-我秀或者是用NG-重复或只显示来自饲料中的一个条目. 我该如何正确处理呢? 我应该返工JS侧传入的JSON? 如果是的话可能有人点我这样做的正确方法. <feed xm

  • Angularjs NG重复inappbrowser 2014-01-23

    有没有什么办法,使这项工作:IM使用inioc和科尔多瓦,我已经安装了科尔多瓦inappbrowser打开PDF文件. 我有这样的代码: <a ng-repeat='order in orderList' onclick="window.open('{{order.url}}', '_blank', 'location=yes')">Trip To {{order.region.title}} </a> 所以,你可能会说使用NG-点击,但插件犯规支持NG单击它只

  • 我可以用其它的前缀,而不是与angularjs`ng`? 2014-08-22

    我是新手,angularjs. 当我阅读文档,我发现它使用ng作为属性前缀: <body ng:controller="PhoneListCtrl"> <ul> <li ng:repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body> 我想知道我是否可以修改它为

  • 在AngularJS NG重复内增量计数器 2013-11-21

    我有两个嵌套的NG-重复,并希望来访问外部和内部指标. <div ng-repeat="column in columns" ng-init="columnIndex = $index"> <div ng-repeat="row in column" ng-init="rowIndex = $index"> <p ng-click="delete(column, row)"&g

  • 角NG网 - 多列排序与useExternalSorting:真 2014-04-12

    以ng栅,内置排序功能不排序在网格中的全部数据,将其与在一个页面排序只有数据. 为了克服这一点,我们使用的是外部排序由网格环境中提供"useExternalSorting"为真. 然后,我们会看的范围变量如下图所示, $scope.$watch('settings.sortInfo', function(new_val, old_val) { if(new_val != old_val){ //sort the result } }); 在上述情况下,排序只有一个列. 有人建议我实现排

  • 建立一个表中AngularJS NG重复的多层次 2012-12-01

    我们必须建立在客户的网站与各种数据的报告. 大多数报告的结构是这样的: Headers [Group 1 rows] Group 1 totals [Group 2 rows] Group 2 totals ... [Group x rows] Group x totals Grand totals 我们在表中使用这样的事情做到这一点 <table> <th>...</th> <tbody ng-repeat="group in data"&g

  • 是否NG-网格具有右键上下文菜单? 2015-02-09

    是否NG网提供右键上下文菜单? 我找不到它http://angular-ui.github.io/ng-grid/ 不过,我记得有一个全面的演示页可几个星期前(2014年7月),其中被证明行级乃至细胞水平上点击右键关联菜单. 不幸的是我没有那个URL现在奇怪的是没能找到这在谷歌了. 提前致谢. --------------解决方案------------- 我觉得这个源可能是有益的,它显示了一种方法来创建使用(ngRightClick)指令,打开的onclick一个面板以显示上下文菜单. htt

  • UI网angularjs复选框按钮没有被诉诸 2013-04-19

    电网angularjs我有一个复选框列后,我检查一列,并与其他列如年龄排序的活动列不被使出这是PBM的plunkr "http://plnkr.co/edit/Q3Fs3XiRBpqkzKdZlGXW?p=preview" <!doctype html> --------------解决方案------------- 你与你的电池模板的问题. 你是不是一个绑定的值isActive的复选框. 更改复选框列本 { name: 'isActive', displayName: '

  • AngularJS - 处理错误错误:[NG:AREQ]在这种特殊情况下(?) 2014-10-18

    家伙. 我一直试图建立与角指令手风琴,但我在控制台收到此错误. Error: [ng:areq] http://errors.angularjs.org/1.3.2/ng/areq?p0=CustomDirectivesController&p1=not%20a%20function%2C%20got%20undefined at Error (native) at file:///Users/Marcelo/Desktop/Online-Colleges/capi/view/scripts/a

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.880 (s). 10 q(s)