Can someone guide on the correct syntax for accessing binding values if the data is a nested JSON array. Here is the plunker for the use case http://plnkr.co/edit/tizLxnAtgqDnptiEb3mg?p=preview
Basically, as you can see here address is a collection of different addresses and I need a way to filter it similar to the Angular JS filter expression which I already tried in above and it's working. But is there some expression specific to UI Grid such as MainAttribute[childAttribute='XYZ'].value or something like that.
Issue is I'm able to retrieve filtered child attributes from the array using AngularJS expression but at the backend it's still an array and causing issue such as from front end not able to filter on that column and when you export to CSV it's giving complete JSON array for that column.
app.js
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function ($scope) {
var statusTemplate = "<div>{{(address | filter:{street:'303 Dove Ave'})[0].city}}</div>";
$scope.gridOptions = {
enableSorting: true,
columnDefs: [{
name: 'firstName',
field: 'first-name'
}, {
name: '1stFriend',
field: 'friends[0]'
}, {
name: 'city',
cellTemplate: statusTemplate
}, {
name: 'getZip',
field: 'getZip()',
enableCellEdit: false
}],
data : [{
"first-name": "Cox",
"friends": [
"friend0"
],
"address": [{
street: "301 Dove Ave",
city: "Nairobi",
zip: "39565"
}, {
street: "302 Dove Ave",
city: "Delhi",
zip: "39565"
}, {
street: "303 Dove Ave",
city: "Patna",
zip: "39565"
}, {
street: "304 Dove Ave",
city: "Jamshedpur",
zip: "39565"
}, {
street: "305 Dove Ave",
city: "Bangalore",
zip: "39565"
}],
"getZip": function() {
return this.address.zip;
}
}]
};
}]);
index.html
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
