ngGrid cell value is an enum value, how do I use the enum name?

问题

This is my ngGrid definition:

$scope.notesGrid = { 
    data: 'notes',
    enableHighlighting: true,
    enablePinning: false,
    enableColumnResize: true,
    keepLastSelected: false,
    columnDefs: [
        {field:'date', displayName:'Date', cellFilter:'date:\'yyyy-MM-dd\'', cellClass:'align-right'},
        {field:'noteId', displayName:'Code', cellClass:'align-right'},
        {field:'type', displayName:'Sale/Rent'}],
    selectedItems: $scope.selectedNotes,
    multiSelect: false,
    afterSelectionChange: function (rowItem, event) {
    }
};

The JSON representing a single note (from the JSON Array notes) is like this:

{
    noteId: 5,
    date: '2014/09/18',
    type: 1                 /* 1 means Sale, 2 means Rent */
}

I don't want to print "1" or "2" in the "type" cell.
I want to print "Sale" or "Rent" depending on the value.

Question: What is the best way to achieve this? Would you use a cellTemplate? cellTemplate sounds more like a "look-n-feel" thing. I was doing some tests with cellTemplate but I noticed that the default cellTemplate is very complete in terms of html. In ng-grid's wiki for templating they say this:

https://github.com/angular-ui/ng-grid/wiki/Templating

 Default Cell Template:
 <div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}}</span></div>

I don't want to be using a complex template and the default is already very complex.

Maybe I should re-map my entire notes JSON Array before plugging into the notesGrid.data? What is an elegant solution?

回答1:

I would do a transform on the json to have clear names available in the grid data.

  angular.forEach($scope.myData, function(value) {
    if (value.type == 1) {
      value.typeName = 'Sale';
    } else {
      value.typeName = 'Rent';
    }
  });

This may be handy if you want to give the user a filter input where he can enter a searchtext at a later point.

Look here

回答2:

Here's what I did in my application.

Cell template:

{
  field: 'FreightRules', displayName: 'Rules', visible: true, enableCellEdit: false, enableCellSelection: false, sortable: false, width: "66px", resizable: true,
  cellTemplate: '<div class="rules-directive" 
     freight-rules="{{row.entity.FreightItemGuid}}" 
     rules-test="getRules(row.entity.FreightItemGuid)"></div>'
}

Directive:

.directive('rulesDirective', function () {
    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { freightRules: '@freightRules', getRules: '&rulesTest' },
        template: '<div ng-switch on="freightRules | areRulesAvailable">' +
          '<div ng-switch-when = true ><a ng-class="\'colt\'+ col.index" class="ng-cell-text" data-toggle="modal" ng-click="getRules(freightRules)" href="#addFreightRuleModal"><span class="glyphicon glyphicon-cog"></span></a></div>' +
          '<div ng-class="\'colt\'+ col.index" class="ng-cell-text" ng-switch-when = false style="color:white"><span class="glyphicon glyphicon-remove"></span></div>' +
          '</div>'
      }
});

Only after revising my code I see that I too have used template.

来源：https://stackoverflow.com/questions/25925615/nggrid-cell-value-is-an-enum-value-how-do-i-use-the-enum-name

标签

angularjs

enums

ng-grid