使用Angular JS(ng-grid)在分组列上显示图标和文本

时间:2015-04-16 13:41:32

标签: angularjs ng-grid

我希望同时获得图标列和文字 ng-grid 支持。

在我的示例中,第一个分组列是一个图标,第二个分组是一个字符串。

我正在使用 gridOptions 属性 aggregateTemplate

我的目标是正确显示图标和文字的分组列。

Here是我的plnkr链接。

$scope.gridOptions = {
  data: 'myData',
  groups: ['complexIcon.path', 'complex'],
  groupsCollapsedByDefault: false,
  enableSorting: true,
  sortInfo: { fields: [], columns: [], directions: [] },
  useExternalSorting: true,
  columnDefs: [{
      field: 'complexIcon.path',
      visible: false
  }, {
      field: 'complexIcon.situation',
      displayName: 'Situation'
  }, {
      field: 'complex',
      displayName: 'Date'
  }],
  aggregateTemplate: aggregateRowTemplate()
};

function aggregateRowTemplate() {
    var result = '';

    result = "<div ng-model=\"showIcon\" ng-init=\"showIcon={{showIconFunc(row)}}\" ng-click=\"row.toggleExpand()\" ng-style=\"rowStyle(row)\" class=\"ngAggregate\">";
    result += "<span ng-if=\"!showIcon\" style=\"display: inline\"><img ng-src=\"{{row.label}}\" lazy-src> ({{row.totalChildren()}})</span>\r";
    result += "<span ng-if=\"showIcon\" class=\"ngAggregateText\">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}})</span>\r";
    result += "<div class=\"{{row.aggClass()}}\"></div></div>"

    return result;
}

我的控制器:

$scope.showIconFunc = function (row) {
  if (row.field == "complexIcon.path") {
      return true;
  }

  return false;
};

如何同时获得图标列和文字 ng-grid 支持?

谢谢!

0 个答案:

没有答案