我正在使用 Angular Grid (ag-grid) 来显示数据。在我的 gridOptions 中,我使用 cellClicked
在单击其中一列时调用函数。该函数 SeeDetails
只需将范围上的变量设置为 true 或 false,即可隐藏/显示包含 ag-grid
的 div。由于某种原因它不起作用。
为了测试,我在 ag-grid
外部创建了一个按钮,它调用相同的 SeeDetails
函数。当这样做时,div 隐藏网格就好了(在我的 html 中,我有 ng-show="vm.ShowDetails == 'false'"
来显示隐藏网格)。
我认为这与范围有关,只是不确定是什么。有什么想法吗?
HTML:
<div ng-show="vm.ShowDetails == 'false'">
<div style="height: 800px" ag-grid="vm.gridOptions" class="ag-fresh"></div>
</div>
View 模型:
var vm = this;
vm.ShowDetails = 'false';
vm.gridOptions = {
rowData: null,
enableColResize: true,
enableSorting: true,
enableFilter: true,
columnDefs: [
{
field: 'LogID',
headerName: 'Log ID a',
width: 100
}, {
headerName: 'Log ID',
name: 'Log ID',
cellClicked: function (params) {
vm.SeeDetails(params.data.LogID);
},
cellRenderer: function (params) {
return '<a>' + params.data.LogID + '</a>';
}
}, {
headerName: 'Date Of Error',
name: 'Col Name',
cellRenderer: function (params) {
return moment(params.data.TimeOfError).format('DD/MMM/YYYY')
//return params.data.TimeOfError;
}
}
]
};
vm.SeeDetails = function SeeDetails(LogID) {
if (vm.ShowDetails == 'false') {
vm.ShowDetails = 'true';
} else {
vm.ShowDetails = 'false';
}
}
最佳答案
ag-grid 在此特定回调中不会调用摘要周期。
要解决此问题,只需确保摘要周期已启动即可。
执行此操作:
vm.SeeDetails = function SeeDetails(LogID) {
if (vm.ShowDetails == 'false') {
vm.ShowDetails = 'true';
} else {
vm.ShowDetails = 'false';
}
setTimeout( function() { $scope.$apply(); }, 0 );
}
超时是作为一种保护措施来完成的,以确保摘要周期尚未运行。需要调用 native 超时而不是使用 Angular 超时服务,因为 Angular 超时服务将保证摘要正在运行(您不希望这样)。
关于javascript - Angular 网格(ag-grid)显示/隐藏不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31247282/