Angular Ui 网格

Question

抱歉，如果这真的很简单，但是....

我想显示数据网格，但需要查找一些列。这将成为一个可编辑的网格，但我在基础知识上受苦所以上帝帮助我。

我有两组数据：

  $gridOptions1.data =  [{"group_id":"1","location_id":"-1","group_name":"Cars","active":"1"},{"group_id":"2","location_id":"1","group_name":"Trains","active":"1"},{"group_id":"3","location_id":"2","group_name":"Buses","active":"0"}]

和

 $scope.locations=[{value: "-1", text: 'All Locations'},
{value: "0", text: 'Location 1'},
{value: "1", text: 'Location 2'},
{value: "2", text: 'Location 3'},
{value: "3", text: 'Location 4'}];

并希望在网格中显示。

 $scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
  { field: 'location_id' },
  { field: 'group_name' },
  { field: 'active' },
  { name: 'Location', field:'location_id', cellFilter: 'maplocation:this'}
],
onRegisterApi: function( gridApi ) {
  $scope.grid1Api = gridApi;
}

};

我需要做的是映射位置 id

我以为我可以使用过滤器，但似乎无法访问范围数据。

如果有人能给我一个简单的例子来说明如何做到这一点，我将非常感激，因为我正在努力寻找我想做的事情的任何例子。

据我所知，'this' 参数是指向记录的指针，而不是定义网格选项的范围。

我不想在过滤器中定义数据，因为它来自数据库。

希望这是有道理的。

Answer 1

如果您想使用应用程序范围内的部分数据来转换显示在 UI 网格中的数据，最好使用自定义模板并从模板中调用函数。

像这样的东西应该可以工作：

columnDefs: [
  { field: 'location_id' },
  { field: 'group_name' },
  { field: 'active' },
  { name: 'Location', field:'location_id', cellTemplate: 'location-template'}
],

然后HTML：

<script type="text/ng-template" id="location-template">
    <div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.formatLocation(row)}}</div>
</script>

现在您所要做的就是在您的控制器范围内定义函数 formatLocation 并在那里施展魔法。

从单元格模板中调用函数时，请确保使用 grid.appScope 访问控制器的范围，就像我提供的示例中那样。

Answer 2

感谢@Ethnar，这是一个将模板保留在源代码中的可行解决方案：

columnDefs: [  { field: 'location_id' }, 
 { field: 'group_name' }, 
 { field: active' }, 
 { name: 'Location', field:'location_id',
 cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.formatLocation(row)}}</div>'
}],

那么只需要 formatLocation 函数：

$scope.formatLocation=function(row)
 {
  locationid=row.entity.location_id;
  if(locationid && $scope.locations.length) {
      var selected = $filter('filter')($scope.locations, {value: locationid});
  return selected.length ? selected[0].text : 'Not set';
} else {
  return  'Not set';
  } };

Angular Ui 网格

Angular Ui Grid

angularjs

angular-ui-grid