ui-grid display cell как select tag

Question

У меня есть пример ui-сетки, в которой один из столбцов представляет тип пола («Пол»: мужчина, женщина ..). Данные json, связанные с сеткой, содержат только код типа (1, 2, 3 ...) Но я хочу показать имя пола, как «мужчина», если код 1 и т. Д. И когда пользователь выбрать из списка новый пол я хочу показать новое имя пола И обновить код пола в данных json.

На самом деле, это было до сих пор, когда я использовал основной HTML таблицу (добавить пример в plnkr ссылке)

любая идея?

// Код идет здесь и ссылка на plunker: http://plnkr.co/edit/g6xYama3MidekeDqI3p8?p=preview

вар приложение = angular.module ('приложения', [ 'ngAnimate', 'ui.grid', 'ui.grid.edit',» ui.grid.cellNav ']);

app.controller ('MainCtrl', [ '$ Объем', '$ HTTP', функция ($ Объем, $ 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" }] 

} ]);

Answer 1

Вам необходимо применить фильтр ячейки. Я разветвил ваш plunkr с помощью решения.

Фильтра:

app.filter('mapGender', function() { 
    var genderHash = { 
    1: 'male', 
    2: 'female', 
    3: 'both', 
    4: 'none' 
    }; 

    return function(input) { 
    if (!input){ 
     return ''; 
    } else { 
     return genderHash[input]; 
    } 
    }; 
}); 

Колонок Защита:

{ 
    field: 'gender', 
    editType: 'dropdown', 
    cellFilter: 'mapGender', 
    enableCellEdit: true, 
    editableCellTemplate: 'ui-grid/dropdownEditor', 
    editDropdownOptionsArray: $scope.genderTypes, 
    editDropdownIdLabel: 'ID', 
    editDropdownValueLabel: 'type' 
} 

Plunker: http://plnkr.co/edit/hnaMJjBGaQgMGcgt3Hc2?p=preview

Литература:

• Пользовательский интерфейс-сетки Фильтры: http://ui-grid.info/docs/#/tutorial/306_custom_filters
• Угловая Фильтр: https://docs.angularjs.org/api/ng/filter/filter