Question

这是我的ngGrid定义：

$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) {
    }
};

表示单个音符的JSON（来自JSON数组音符）是这样的：

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

我不想在“类型”单元格中打印“1”或“2” 我想根据价值打印“Sale”或“Rent”。

问题：实现这一目标的最佳方法是什么？你会使用cellTemplate吗？ cellTemplate听起来更像是“看起来感觉”的东西。我正在使用cellTemplate进行一些测试，但我注意到默认的cellTemplate在html方面非常完整。在ng-grid的模板wiki中，他们说：

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>

我不想使用复杂的模板，默认情况已经非常复杂了。

也许我应该在插入notes之前重新映射我的整个notesGrid.data JSON数组？什么是优雅的解决方案？

Answer 1

这是我在申请中所做的。

单元格模板：

{
  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('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>'
      }
});

只有在修改我的代码之后，我才发现我也使用过模板。

Answer 2

我会对json进行转换，以便在网格数据中提供明确的名称。

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

如果您想为用户提供过滤输入，以便稍后输入搜索文本，这可能会很方便。

Look here

ngGrid单元格值是枚举值，如何使用枚举名称？

2 个答案: