Шаблоны ячеек на основе значения ячейки

У меня есть угловая сетка с первой строкой столбца, которая должна отображаться как якорная ссылка или метка, основанная на условии javascript, что значение этой ячейки не начинается с символа «M». Если значение ячейки столбца 1 начинается с символа «M», столбец должен быть меткой, в противном случае это должна быть гиперссылка. Я верю, что мне нужно использовать два разных шаблона ячеек, но не уверен, как вызывать их в событии привязки данных строки uigrid. Ниже приведен код.

Шаблоны для анкора и метки:

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
               '  <a  class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +
               '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
              '  <label>{{row.entity.TagNumber}}</label>' +
              '</div>';

Ниже представлена ​​сетка

        $scope.ComfortPlanGrid = {
        enableGridMenu: true,
        exporterMenuCsv: true,
        exporterMenuPdf: false,
        gridMenuShowHideColumns: true,
        enableRowSelection: false,
        enableColumnMenus: false,
        enableFiltering: false,
        enablePaging: false         

    };
    $scope.ComfortPlanGrid.columnDefs = config.headers.comfortPlansHeadersGrid;

Ниже приведены заголовки сетки

   var headers = {
    comfortPlansHeadersGrid: [
        { field: 'TagNumber', width: 130, displayName: 'Claim Tag Nbr', cellTemplate: linkCellTemplate },
        { field: 'CustomerNumber', width: 200, displayName: 'Customer/Dealer' },
        { field: 'Status', width: 80, cellTooltip: true },
        { field: 'StatusDate', width: 175, displayName: 'Status Date' },
        { field: 'Description', displayName: 'Description', width: 270, cellTemplate: claimDetailTemplate },
        { field: 'ContractNumber', width: 200, displayName: 'Contract Number', headerTooltip: 'Contract Number' },
        { field: 'ServiceDate', width: 175, displayName: 'Service Date', headerTooltip: 'Service Date' }
    ]};

Любая помощь в том, как этого добиться, приветствуется.


celltemplate angular-ui-grid
person sam    schedule 23.10.2016    source источник
comment
Я могу выполнить проверку, используя приведенный ниже шаблон ячейки, но я хотел бы вызвать какую-либо другую функцию javascript для проверки также внутри шаблона ячейки. Приветствуются любые идеи о том, как вызвать функцию javascript в ng-if.   -  person sam    schedule 23.10.2016
comment
Обновлен код шаблона ячейки: var linkCellTemplate = '‹div class=ngCellText ng-class=col.colIndex()›' + '‹div ng-if=row.entity.TagNumber.substring(0,1).toUpperCase() ! ==\'M\'› ‹a class=text-blue-color text-underline href=' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + ' target=_blank;›{{row.entity.TagNumber}}‹/a›‹/div›' + ' ‹div ng-if=row.entity.TagNumber.substring(0,1).toUpperCase( ) ===\'M\'› ‹label›{{row.entity.TagNumber}}‹/label›‹/div›' + '‹/div›';   -  person sam    schedule 23.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте следующий код:

Добавьте шаблон ячейки в coldef в соответствующем столбце.

cellTemplate: DisplayConditionalTemplate(value)


function DisplayConditionalTemplate(value){
var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +'  <a  class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +                  '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'+'  <label>{{row.entity.TagNumber}}</label>' +                  '</div>';

if(value.charAt(0) === 'M')
   return labelCellTemplate;
else
  return linkCellTemplate;
}
person Hari Addepalli    schedule 05.11.2016