Angular-ui-grid - Wie zeige ich bedingt Zellvorlagen an, entsprechend dem Wert der Zelle

Question

Ich versuche, verschiedene Vorlagen anzuzeigen, wenn der Wert der Zelle unterschiedlich ist.

1) Wie kann ich hier auf den Wert der Zelle (valueOfType) zugreifen?

2) Ist es möglich, auf den Wert einer anderen Spalte zuzugreifen (valueOfNumber)?

3) Kann ich die Vorlage entsprechend dem Zellenwert anzeigen? wie kann ich hier cellValue bekommen?

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

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

Answer 1

Sie sollten in der Lage sein, den Spaltenwert für den Zugriff auf den Umfang Variable in der Vorlage mit

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

Hier ist die vollständige Arbeitsbeispiel

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") 
} 
}]);