角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'; 
    } };