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

Angular-ui-grid -- 如何根据单元格的值有条件地显示单元格模板

Angular-ui-grid -- How do I conditionally show cell templates, according to the cell's value

angular-ui-grid