Ng-grid将几个项目插入单元格

时间:2014-03-26 11:31:15

标签: angularjs ng-grid

如何将多个值插入1个单元格,例如电子邮件,电话和地址到1个单元格。 我需要在单元格中减少行数和更多信息。

我试过这样的方式:

 angular.forEach($scope.genData,function(row){
        row.getNameAndAge = function(){
            return this.name + '-' this.age ;
        }
    });

并选择:

columnDefs: [
            {field:'getNameAndAge()', displayName:'Contacts'}
        ]

但它不适合我。

我的JSON:

{
        "picture": "http://placehold.it/32x32", 
        "about": "Laboris do in mollit nostrud sit tempor ad velit. Duis excepteur ex voluptate dolore elit ad non aliqua. Dolore pariatur non sit eiusmod irure. Aliquip anim officia ea pariatur commodo excepteur. Nisi cupidatat Lorem minim culpa et voluptate commodo duis.\r\n", 
        "guid": "89f8d801-908b-4f9f-a361-d32a0b154451", 
        "name": "Rivers Navarro", 
        "tags": [
            "sit", 
            "pariatur", 
            "non", 
            "eu", 
            "sit", 
            "exercitation", 
            "magna"
        ], 
        "gender": "male", 
        "age": 36, 
        "friends": [
            {
                "id": 0, 
                "name": "Frazier Jefferson"
            }, 
            {
                "id": 1, 
                "name": "Polly Estes"
            }, 
            {
                "id": 2, 
                "name": "Klein Cleveland"
            }
        ], 
        "registered": "2004-05-18T13:23:46 -03:00", 
        "longitude": 79.622006999999996, 
        "email": "riversnavarro@everest.com", 
        "phone": "+1 (972) 552-3807", 
        "address": "962 Grace Court, Neahkahnie, Virginia, 6242", 
        "latitude": -20.004383000000001, 
        "customField": "Hello, Rivers Navarro! You have 4 unread messages.", 
        "balance": "$3,296.00", 
        "company": "Everest", 
        "id": 0, 
        "isActive": true
    }, 

如果我有"朋友"这样的字段,我怎么能在单元格中显示这个数组?

1 个答案:

答案 0 :(得分:1)

对每个单元格使用celltemplate,然后使用row.entity.<FIELD>引用您想要的字段...这是一个示例:

var nameAgeCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">{{row.entity.name}} ({{row.entity.age}})</div>';
var friendsCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()"><span ng-repeat="friend in row.entity.friends">{{friend.name}}{{$last ? '' : ', '}}</span></div>';

$scope.gridOptions = {
  columnDefs: [
    {
      displayName: 'Name (age)',
      cellTemplate: nameAgeCellTemplate
    },
    {
      displayName: 'Friends',
      cellTemplate: friendsCellTemplate
    }
  ]
};

这会产生如下表:

+----------------------+--------------------------------------------------+
| Name (age)           | Friends                                          |
+----------------------+--------------------------------------------------+
| Rivers Navarro (36)  | Frazier Jefferson, Polly Estes, Klein Cleveland  |
+----------------------+--------------------------------------------------+