2016-06-23 34 views
0

我正在使用ag-Grid填充数据表。我想创建一个模板列。这是我的代码。但是,我无法提供小提琴,因为网格表不显示在小提琴中。ag-Grid将模板创建为不工作的列 - AngularJS

JS:

agGrid.initialiseAgGridWithAngular1(angular); 

var app = angular.module('myApp', ['agGrid']); 
app.controller('myController', function($scope) { 
var columnDefs = [{ 
    headerName: "<input type=checkbox>", 
    field: "Select", 
    width: 120, 
    cellRenderer: function(params) { 
    var htmlElement = document.createElement("input"); 
    htmlElement.type = 'checkbox'; 
    return htmlElement; 
} 
}, { 
headerName: "Ref No", 
field: "rn", 
width: 120, 
template: '<a href="#/updateInspection" ng-bind="myDummyData.rn></a>' 
}, { 
headerName: "Postal Code", 
field: "pc", 
width: 120 
}, { 
headerName: "Zone Name", 
field: "zn", 
width: 120 
}]; 

$scope.myDummyData = [{ 
"rn": "HIP/12/TM-1", 
"pc": "400001", 
"zn": "Zone - 1" 
}, { 
"rn": "HIP/12/TM-1", 
"pc": "400001", 
"zn": "Zone - 1" 
}]; 

$scope.gridOptions = { 
columnDefs: columnDefs, 
rowData: $scope.myDummyData, 
enableFilter: true, 
enableColResize: true, 
enableSorting: true, 
rowHeight: 36, 
headerHeight: 36 
}; 

document.addEventListener('DOMContentLoaded', function() { 
    var gridDiv = document.querySelector('#myGrid'); 
    new agGrid.Grid(gridDiv, $scope.gridOptions); 
    $scope.gridOptions.api.setRowData($scope.myDummyData); 
}); 
}); 

HTML:

<div ng-controller="myController"> 
<div id="myGrid" class="ag-fresh" ag-grid="gridOptions"></div> 
</div> 

与值显示的所有行,但该列一个与模板不显示。它是否与ng-bind有关?

我以this link为例。除了JSON数据外,我还创建了自己的数据。

我该如何解决这个问题?

回答

0

打开角度编译 通过将网格选项属性angularCompileRows设置为true来开启角度编译。