如何使用 UI 网格自定义字段的输出

Question

我有一组字段或每一行看起来像 {inBing:true, inOSM:true, inGoogle:false}。根据这些，我想将这些值表示为字符串，例如 'B O'，这意味着 Bing 和 OSM 已启用，而 Google 未启用。

所以我需要遍历这些字段并构建输出字符串。

问题是我可以在 UI grid 中的什么地方放置和调用这个函数？

Answer 1

可以像这样使用自定义单元格模板：

columnDefs: [
      { name: 'name' },
      ...
      { name: 'whichSearchEngines', field: 'some_field', cellTemplate: '<div class="ui-grid-cell-contents" >{{grid.appScope.searchEngineFormatter(row.some_field)}}</div>' }
    ]

$scope.searchEngineFormatter = function (v) {
   str = '';
   if (v.inBing) str += 'B ';
   if (v.inOSM) str += 'O ';
   if (v.inGoogle) str += 'G';
   return str;
};

Answer 2

我会为此使用过滤器。

处理您的数据，使其看起来像：

{ field1: value1, field2: value2, searchFlags: { inBing: true, inOSM: false, inGoogle: true } }
{ field1: value2, field2: value4, searchFlags: { inBing: false, inOSM: true, inGoogle: false } }
...

你的 columnDefs 如：

columnDefs: [
  { name: 'field1' },
  { name: 'field2' }, 
  { name: 'searchFlags', cellFilter: 'mapFlags' }
];

最后，定义过滤器：

.filter('mapFlags', function( input ) {
  str = '';
  if (v.inBing) str += 'B ';
  if (v.inOSM) str += 'O ';
  if (v.inGoogle) str += 'G';
  return str;
});

http://ui-grid.info/docs/#/tutorial/201_editable

中有一个过滤器的例子

如何使用 UI 网格自定义字段的输出

How to customize output of the field with UI Grid

javascript

angularjs

angular-ui-grid