var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'amount', name: 'Number', cellFilter: 'fractionFilter' },
{ field: 'amount', name: 'Currency', cellFilter: 'currencyFilter:this' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}])
.filter('fractionFilter', function () {
return function (value) {
return value.toFixed(0);
};
})
.filter('currencyFilter', function () {
var currencyMap = {
'dollar': '$',
'pound': '£',
'euro': '€'
};
return function (value, scope) {
return currencyMap[scope.row.entity.currency] + value.toFixed(2);
};
})
;
.grid {
width: 100%;
height: 250px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
[
{
"name": "Claire",
"amount": 21.9015,
"currency": "euro"
},
{
"name": "Fitzpatrick",
"amount": 41.6352,
"currency": "pound"
},
{
"name": "Ericka",
"amount": 31.4228,
"currency": "pound"
},
{
"name": "Navarro",
"amount": 2.1944,
"currency": "dollar"
},
{
"name": "Cherie",
"amount": 31.9234,
"currency": "dollar"
},
{
"name": "Cobb",
"amount": 45.5756,
"currency": "pound"
},
{
"name": "Essie",
"amount": 35.2809,
"currency": "euro"
},
{
"name": "Christine",
"amount": 32.8566,
"currency": "euro"
},
{
"name": "Fox",
"amount": 7.3757,
"currency": "pound"
},
{
"name": "Sexton",
"amount": 32.4889,
"currency": "euro"
},
{
"name": "Reyes",
"amount": 13.4744,
"currency": "pound"
},
{
"name": "Rich",
"amount": 17.2059,
"currency": "pound"
},
{
"name": "Fleming",
"amount": 35.3602,
"currency": "pound"
},
{
"name": "Walls",
"amount": 44.3878,
"currency": "euro"
},
{
"name": "Pratt",
"amount": 5.142,
"currency": "pound"
},
{
"name": "Ladonna",
"amount": 35.6338,
"currency": "euro"
},
{
"name": "Craig",
"amount": 12.3776,
"currency": "dollar"
},
{
"name": "Keith",
"amount": 11.4687,
"currency": "pound"
},
{
"name": "Patrick",
"amount": 15.782,
"currency": "pound"
},
{
"name": "Rosie",
"amount": 38.8474,
"currency": "pound"
},
{
"name": "Nina",
"amount": 40.8391,
"currency": "pound"
},
{
"name": "Deanna",
"amount": 36.0889,
"currency": "pound"
},
{
"name": "Larson",
"amount": 43.4802,
"currency": "euro"
},
{
"name": "Judy",
"amount": 49.9711,
"currency": "pound"
},
{
"name": "Wells",
"amount": 39.6342,
"currency": "euro"
},
{
"name": "Rosalie",
"amount": 15.8732,
"currency": "euro"
},
{
"name": "Elnora",
"amount": 35.3185,
"currency": "dollar"
},
{
"name": "Noreen",
"amount": 8.3288,
"currency": "euro"
},
{
"name": "Estella",
"amount": 23.7257,
"currency": "euro"
},
{
"name": "Lakisha",
"amount": 6.3578,
"currency": "pound"
},
{
"name": "Marcella",
"amount": 38.3085,
"currency": "euro"
},
{
"name": "Martin",
"amount": 4.2861,
"currency": "dollar"
},
{
"name": "Taylor",
"amount": 24.2231,
"currency": "pound"
},
{
"name": "Tia",
"amount": 41.498,
"currency": "dollar"
},
{
"name": "Alvarez",
"amount": 14.4621,
"currency": "dollar"
},
{
"name": "Pearlie",
"amount": 21.7383,
"currency": "dollar"
},
{
"name": "Hartman",
"amount": 17.7633,
"currency": "pound"
},
{
"name": "Oconnor",
"amount": 1.3161,
"currency": "pound"
},
{
"name": "Strong",
"amount": 40.5328,
"currency": "dollar"
},
{
"name": "Darlene",
"amount": 40.0636,
"currency": "euro"
},
{
"name": "Jocelyn",
"amount": 22.3296,
"currency": "dollar"
},
{
"name": "Mitchell",
"amount": 5.0819,
"currency": "pound"
},
{
"name": "Leona",
"amount": 8.7497,
"currency": "dollar"
},
{
"name": "Queen",
"amount": 18.0304,
"currency": "dollar"
},
{
"name": "Elba",
"amount": 33.9686,
"currency": "pound"
},
{
"name": "Morse",
"amount": 21.5728,
"currency": "pound"
},
{
"name": "Lenore",
"amount": 11.5533,
"currency": "pound"
},
{
"name": "Althea",
"amount": 19.6145,
"currency": "dollar"
},
{
"name": "Rosa",
"amount": 12.2955,
"currency": "pound"
},
{
"name": "Margret",
"amount": 5.4759,
"currency": "euro"
}
]