我正在使用基于Angular的UI网格。我想在行上右键单击显示另一个网格。该行的ID字段将使用http.post传递给DB。返回的数据将以模态显示在另一个网格中。这就是我正在做的事情
rowTemplate: rowTemplate:'....'
appScopeProvider: appScopeProvider:$ scope.myAppScopeProvider,
$scope.myAppScopeProvider = {
showMenu: function (row) {
var modalInstance = $modal.open({
controller: 'ContextController',
templateUrl: 'ngTemplate/ContextMenu.html',
resolve: {
selectedRow: function () {
//getTable(row.entity);
return row.entity;
}
}
});
modalInstance.result.then(function (selectedItem) {
console.log('modal selected Row: ' + selectedItem);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
},
app.controller('ContextController',
['$scope', '$modal', '$modalInstance', '$filter', '$interval','$http' , 'selectedRow',
function ($scope, $modal, $modalInstance, $filter, $interval, $http, selectedRow) {
$scope.selectedRow = selectedRow;
$scope.rel_details = function () {
$scope.nodeName_rel = selectedRow.NodeName;
$scope.fromTime_rel = "2015-11-11";
$scope.toTime_rel = "2016-12-21";
$http.post('../getData', { nodeName: $scope.nodeName_rel, trapType: 'All', startTime: $scope.fromTime_rel, endTime: $scope.toTime_rel })
.success(function (data) {
console.log(data);
$scope.gridOptions1.data = data;
});
//$scope.selectedRow = null;
//$modalInstance.close();
};
ContextMenu.html:
<script type="text/ng-template" id="ngTemplate/ContextMenu.html">
<div class="modal-header">
<h4>Context Menu</h4>
</div>
<div class="modal-body">
<button class="btn btn-primary btnCustom" ng- click="rel_details()">Grouped Details</button>
<div id="grid_rel" ui-grid="gridOptions1" class="grid"></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary btnCustom" ng-click="ok()">OK</button>
<!--<button class="btn btn-primary btnCustom" ng- click="cancel()">Cancel</button>-->
</div>
</script>