Угловая сетка 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; 
}  

};

Что мне нужно сделать, это карта идентификатор местоположения

Я думал, что я мог бы использовать фильтр, но не могу показаться, чтобы получить доступ к данным области видимости.

Если бы кто-нибудь мог дать мне простой пример того, как это сделать, я был бы очень благодарен, поскольку я изо всех сил пытаюсь найти примеры того, что я хочу делать.

Из того, что я вижу, параметр 'this' является указателем на запись, а не областью, в которой определены параметры сетки.

Я не хочу определять данные в фильтре, потому что он поступает из базы данных.

Надеюсь, что имеет смысл.

Answer 1

Если вы хотите использовать часть данных, находящихся в области вашего приложения, чтобы преобразовать данные, отображаемые в сетке пользовательского интерфейса, лучше всего пойти с настраиваемым шаблоном и вызвать функцию из вашего шаблона.

Что-то, как это должно работать:

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