var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'addressFormatter']);
angular.module('addressFormatter', []).filter('address', function () {
return function (input) {
return input.street + ', ' + input.city + ', ' + input.state + ', ' + input.zip;
};
});
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = { };
$http.get('products.json').success(function(data) {
$scope.products = data;
$scope.gridOptions.columnDefs = [
{ name: 'id', enableCellEdit: false, width: '10%' },
{ name: 'name', displayName: 'Name (editable)', width: '30%' },
{ name: 'age', displayName: 'Age' , type: 'number', width: '10%' },
{
name: 'gender',
displayName: 'Gender',
editableCellTemplate: 'ui-grid/dropdownEditor',
width: '20%',
cellFilter: 'mapGender',
editDropdownValueLabel: 'gender',
editDropdownOptionsArray: [
{ id: 1, gender: 'male' },
{ id: 2, gender: 'female' }
]
},
{
name: 'product',
field: 'product.name',
enableCellEdit: true,
editType: 'dropdown',
editDropdownOptionsArray: $scope.products,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'name',
editDropdownValueLabel: 'name'
}
];
});
$scope.msg = {};
$scope.gridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
$scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
$scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
console.log("productID: " + $scope.gridOptions.data[rowEntity.id].product.id);
console.log("productName: " + $scope.gridOptions.data[rowEntity.id].product.name);
console.log("user: " + $scope.gridOptions.data[rowEntity.id].name);
$scope.$apply();
});
};
$http.get('data.json')
.success(function(data) {
for(i = 0; i < data.length; i++){
data[i].gender = data[i].gender==='male' ? 1 : 2;
}
$scope.gridOptions.data = data;
});
}])
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
})
;
.grid {
width: 600px;
height: 450px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/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">
<strong>Data Length:</strong> {{ gridOptions.data.length | number }}
<br>
<strong>Last Cell Edited:</strong> {{msg.lastCellEdited}}
<br>
<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
[
{
"id": 0,
"guid": "de3db502-0a33-4e47-a0bb-35b6235503ca",
"isActive": false,
"balance": "$3,489.00",
"picture": "http://placehold.it/32x32",
"age": 30,
"name": "Sandoval Mclean",
"gender": "male",
"product": {
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":3,
"active":true,
"name":"Apricots",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
},
"company": "Zolavo",
"email": "sandovalmclean@zolavo.com",
"phone": "+1 (902) 569-2412",
"address": {
"street": 317,
"city": "Blairstown",
"state": "Maine",
"zip": 390
},
"about": "Fugiat velit laboris sit est. Amet eu consectetur reprehenderit proident irure non. Adipisicing mollit veniam enim veniam officia anim proident excepteur deserunt consectetur aliquip et irure. Elit aliquip laborum qui elit consectetur sit proident adipisicing.\r\n",
"registered": "1991-02-21T23:02:31+06:00",
"friends": [
{
"id": 0,
"name": "Rosanne Barrett"
},
{
"id": 1,
"name": "Nita Chase"
},
{
"id": 2,
"name": "Briggs Stark"
}
]
},
{
"id": 1,
"guid": "9f507483-5ecc-4af4-800f-349306820585",
"isActive": false,
"balance": "$2,407.00",
"picture": "http://placehold.it/32x32",
"age": 22,
"name": "Nieves Mack",
"gender": "male",
"product": {
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":3,
"active":true,
"name":"Apricots",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
},
"company": "Oulu",
"email": "nievesmack@oulu.com",
"phone": "+1 (812) 535-2614",
"address": {
"street": 155,
"city": "Cherokee",
"state": "Kentucky",
"zip": 4723
},
"about": "Culpa anim anim nulla deserunt dolor exercitation eu in anim velit. Consectetur esse cillum ea esse ullamco magna do voluptate sit ut cupidatat ullamco. Et consequat eu excepteur do Lorem aute est quis proident irure.\r\n",
"registered": "1989-07-26T15:52:15+05:00",
"friends": [
{
"id": 0,
"name": "Brewer Maxwell"
},
{
"id": 1,
"name": "Ayala Franks"
},
{
"id": 2,
"name": "Hale Nichols"
}
]
},
{
"id": 2,
"guid": "58c66190-15be-4e75-9b09-183599403241",
"isActive": false,
"balance": "$3,409.00",
"picture": "http://placehold.it/32x32",
"age": 20,
"name": "Terry Clay",
"gender": "female",
"product": {
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":3,
"active":true,
"name":"Apricots",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
},
"company": "Freakin",
"email": "terryclay@freakin.com",
"phone": "+1 (965) 462-3681",
"address": {
"street": 124,
"city": "Wright",
"state": "Pennsylvania",
"zip": 8002
},
"about": "Exercitation exercitation adipisicing eu cupidatat reprehenderit laborum incididunt reprehenderit Lorem anim. Velit aliquip dolore qui excepteur dolor non occaecat aute et. Consectetur anim veniam irure ea id aliqua amet. Nostrud tempor ullamco velit labore consequat aute nostrud nostrud veniam cupidatat amet nostrud quis. Qui exercitation eiusmod esse eu officia officia Lorem Lorem ullamco voluptate excepteur fugiat nulla et. Ea ipsum ut do culpa labore non duis commodo sit. Id sint dolor ipsum consectetur nostrud nulla consectetur esse deserunt.\r\n",
"registered": "2000-12-02T22:19:28+06:00",
"friends": [
{
"id": 0,
"name": "Etta Hawkins"
},
{
"id": 1,
"name": "Zamora Barlow"
},
{
"id": 2,
"name": "Lynette Vinson"
}
]
},
{
"id": 3,
"guid": "0a1b0539-73ec-473a-846a-71a58e04551c",
"isActive": false,
"balance": "$3,567.00",
"picture": "http://placehold.it/32x32",
"age": 21,
"name": "Bishop Carr",
"gender": "male",
"product": {
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":3,
"active":true,
"name":"Apricots",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
},
"company": "Digirang",
"email": "bishopcarr@digirang.com",
"phone": "+1 (860) 463-2942",
"address": {
"street": 824,
"city": "Homeworth",
"state": "Oklahoma",
"zip": 5215
},
"about": "Nulla ullamco sint exercitation minim ea sunt. Excepteur minim tempor velit in. Proident id reprehenderit nisi officia in anim elit laboris aute sint amet voluptate. Deserunt et nostrud magna eu esse ea adipisicing non quis sint fugiat consectetur enim sint. Magna elit mollit eiusmod non voluptate sunt.\r\n",
"registered": "2012-10-15T19:03:24+05:00",
"friends": [
{
"id": 0,
"name": "Young Gentry"
},
{
"id": 1,
"name": "Dean Lopez"
},
{
"id": 2,
"name": "Mccray Bradford"
}
]
}
]
[
{
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"active":true,
"name":"Salad",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
},
{
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":2,
"active":true,
"name":"Tomato",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
},
{
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":3,
"active":true,
"name":"Apricots",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
},
{
"createdBy":"system",
"createdDate":1427036874924,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":4,
"active":true,
"name":"Cherries",
"productType":{
"createdBy":"system",
"createdDate":1427036874910,
"lastModifiedBy":null,
"lastModifiedDate":null,
"id":1,
"name":"Produce",
"accountingCode":"PT12345",
"includeInInventory":true
}
}
]