Angular-ui-grid - Как условно показать шаблоны ячеек, в соответствии с значением ячейки

Question

Я пытаюсь показать разные шаблоны, когда значение ячейки отличается.

1) как я могу получить доступ к значению ячейки (valueOfType) здесь?

2) Возможно ли получить доступ к значению другого столбца (valueOfNumber)?

columnDefs: [ 
      { name:'type', 
       cellTemplate: '<a ng-class="{style1: valueOfType = '1'}" ng-click=fn(valueOfNumber)></a>' 
      }, 
      { name: 'number'} 
      ], 

3) Могу ли я условно показать шаблон в соответствии со значением ячейки? как я могу получить cellValue?

columnDefs: [ 
      { name:'type', 
       cellTemplate: getTemplate() 
      }, 
      ], 

var getTemplate = function() { 
    if(cellValue == 'something') { 
     return template.html 
    } else { 
     return anotherTemplate.html 
    } 
} 

Answer 1

Вы должны быть в состоянии получить доступ к значению столбца с использованием области видимости переменных внутри шаблона

ng-class=\"{style1:row.entity[col.field]=='1'}\" 

Вот полный рабочий пример,

var app = angular.module('app', ['ngTouch', 'ui.grid','ui.grid.edit']); 
var grid; 
app.controller('MainCtrl', ['$scope', function ($scope) { 

    var myData = [ 
    { 
     id1:"1",id2:"2",id3:"3",id4:"4",id5:"5", 
    }, { 
     id1:"0",id2:"2",id3:"3",id4:"4",id5:"5", 
    },] 

    var getTemplate = function() 
    { 

     return "<div ng-class=\"{style1:row.entity[col.field]=='1'}\" class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS}}</div>"; 

    } 

    var cellEditable = function($scope){ 
    if($scope.row.entity.oldId4===undefined) 
     return false; 
    return $scope.row.entity.oldId4!=$scope.row.entity.id4; 
    } 

    $scope.gridOptions = { 
     enableFiltering: true, 
     onRegisterApi: function(gridApi){ 
     grid = gridApi; 
    }, 
    data: myData, 
    columnDefs:[ 
     { 
      field: 'id1', 
      displayName: "id1", 
      width: 100, 

     enableCellEdit:true, 
      cellEditableCondition : cellEditable, 
      cellTemplate: getTemplate() 
     }, 
     { 
      field: 'id2', 
      displayName: "id2", 
      width: 100, 

     enableCellEdit:true, 
      cellEditableCondition : cellEditable 
     },{ 
      field: 'id3', 
      displayName: "id3", 
      width: 100, 
      enableCellEdit:true, 
      cellEditableCondition : cellEditable 
     },{ 
      field: 'id4', 
      displayName: "id4", 
      width: 100, 
     enableCellEdit:true, 
     },{ 
      field: 'id5', 
      displayName: "id5", 
      width: 100, 
     enableCellEdit:true, 
      cellEditableCondition : cellEditable 
     }, 

    ], 
} 
$scope.gridOptions.onRegisterApi = function(gridApi){ 
      //set gridApi on scope 
      $scope.gridApi = gridApi; 
      gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){ 
      rowEntity.oldId4 = oldValue; 
      $scope.$apply(); 
      }); 
     }; 

$scope.test = function() 
{ 
    window.alert("Cell clicked") 
} 
}]);