我正在使用 Angular Grid (ag-grid) 来显示数据。我正在尝试在我的 Angular 网格中显示嵌套的 json 数据。但我没有成功。
下面是示例 json 数据和 colDef。请提出为什么点运算符与 jqgrid 不同，无法使用嵌套的 json 字段映射网格列。
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.myData = [{
"defaultColumns1": {"region":"PA"},
"defaultColumns2": {"LocationName": "loc1",
"LegalName": "legName1"
}
},
{
"defaultColumns1": {"region":"PB"},
"defaultColumns2": {"LocationName": "loc2",
"LegalName": "legName2"
}
}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'defaultColumns1.region',
displayName: 'Region'
}, {
field: 'defaultColumns2.LocationName',
displayName: 'Location',
headerGroup: 'address'
}, {
field: 'defaultColumns2.LegalName',
displayName: 'Legal Name',
headerGroup: 'address'
}],
enableColumnResize: true,
groupHeaders : true
}
}]);
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link rel="stylesheet" href="../dist/ag-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"> </script>
<script src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script src="../dist/ag-grid.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ag-grid="gridOptions"></div>
</body></html>
最佳答案
ag-grid field 属性只能引用数据行的一个属性，但是 valueGetter 属性允许表达式。所以，虽然
字段:'defaultColumns1.region'
不行，切换到
valueGetter: 'data.defaultColumns1.region'
将正常工作。从你那里 fork 的样本 plunker 在 http://plnkr.co/edit/8enzrjt2MQwfa8VjGaIy?p=preview
关于javascript - 在 ag-grid 中显示嵌套的 json，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32861673/