Question

我有一个ui-grid的例子，其中一列代表性别类型（'性别'：男性，女性......）。绑定到网格的json数据只包含代码类型，如（1,2,3 ......）但是如果代码为1，我想显示性别名称，如'male'，依此类推当用户从列表中选择新性别时，我想显示新的性别名称并更新json数据中的性别代码。

事实上，到目前为止，当我使用基本的HTML表格时（我在plnkr链接中添加了示例）

任何想法？

//代码转到此处并链接为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" }]


  }
]);

Answer 1

您需要应用细胞过滤器。我用解决方案为你的傻瓜分叉了。

过滤

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

ui-grid将单元格显示为选择标记

1 个答案: