在角度ng-grid中如何指定子数组的计数

时间:2014-02-11 17:20:23

标签: javascript angularjs ng-grid

如果字段包含多个项目的数组,则需要指定x个单位的计数。如何在ng-grid字段显示名称中执行此操作?

Json示例: $ scope.data = [{id:{1,3},     nm:John Doe}     ,     {id:{2,4,5},     nm:Jane Doe}]

目前的结果:

Id              Name
--------------  -------------------------------
1,3             John Doe
2,4,5           Jane Doe

期望的结果:

Id              Name
--------------  -------------------------------
2 Ids           John Doe
3 Ids           Jane Doe

当前角色代码:

                $scope.gridOptions = {
                    data: 'data',
                    selectedItems: $scope.mySelections,
                    columnDefs: [
                    {field: 'id', displayName: 'Id', width: '***'},
                    {field: 'nm', displayName: 'Name', width: '****'}],
                    multiSelect: false
                };

2 个答案:

答案 0 :(得分:3)

只需创建一个像这样的单元格模板:

<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty("id").length}} Ids</span></div>

然后像这样应用:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {


    $scope.myData = [{id: [1, 12], name: 'John Doe'},
                     {id: [3, 7, 9, 6, 2], name: 'John Doe'},
                     {id: [10, 52, 78], name: 'John Doe'},
                     {id: [101, 88, 72, 99], name: 'John Doe'}];


    $scope.columnDefs = [
      {
        displayName:'Id',
        cellTemplate: 'cellTemplate.html'
      },
      {
        field:'name', displayName:'Name'
      }
    ]

    $scope.gridOptions = { 
      data: 'myData',
      columnDefs: $scope.columnDefs 
    };
});

示例: Plunker

答案 1 :(得分:0)

如果你想得到子数组的计数/长度,只需使用下面的

{field: 'id.length', displayName: 'Id', width: '***'},

如果您想添加其他内容,例如文字,图片,图标..等等,您应该使用cellTemplate作为上述答案

感谢