I have a ui-grid example where one of the columns represents gender ('Gender': male, female...). The json data binding to the grid only contains code types like (1, 2, 3...). However, I want to display the gender name such as 'male' if the code is 1 and so on. Additionally, when the user selects a new gender from the list, I want to display the new gender name and update the gender code in the json data.
Previously, I achieved this using a basic HTML table (example provided in plnkr link).
Any suggestions?
// See code snippet below and link for plunker: http://plnkr.co/edit/g6xYama3MidekeDqI3p8?p=preview
var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit','ui.grid.cellNav']);
app.controller('MainCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.genderTypes = [{
ID: 1,
type: 'male'
}, {
ID: 2,
type: 'female'
}, {
ID: 3,
type: 'both'
}, {
ID: 4,
type: 'none'
}];
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableCellEditOnFocus: true,
columnDefs: [{
field: 'name',
sort: {
direction: 'desc',
priority: 1
}
}, {
field: 'gender',
editType: 'dropdown',
enableCellEdit: true,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownOptionsArray: $scope.genderTypes,
editDropdownIdLabel: 'ID',
editDropdownValueLabel: 'type'
}, {
field: 'company',
enableSorting: false
}],
onRegisterApi: function(gridApi) {
grid = gridApi.grid;
}
};
$scope.gridOptions.data = [
{ "name": "Ethel Price", "gender": "1", "company": "Enersol" },
{ "name": "Claudine Neal", "gender": "2", "company": "Sealoud" },
{ "name": "Beryl Rice", "gender": "3", "company": "Velity" },
{ "name": "Wilder Gonzales", "gender": "4", "company": "Geekko" },
{ "name": "Georgina Schultz", "gender": "1", "company": "Suretech" }
];
}
]);