https://stackoverflow.com/questions/23630928
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianSolved it this way:
Wrap your grid controllers in a parent controller that holds variables for global grid configuration.
<div ng-controller="GridGlobals">
<h1>Grid 1</h1>
<div ng-controller="MyCtrl1">
<div class="gridStyle" ng-grid="gridOptions1"></div>
</div>
<h1>Grid 2</h1>
<div ng-controller="MyCtrl2">
<div class="gridStyle" ng-grid="gridOptions2"></div>
</div>
</div>
In your individual grid options set the options you want to control globally to the variables stored in the globalGridConfig controller. Since this one wraps the gridcontrollers the variables there are inherited to the scope of the gridcontrollers.
Gridtest.controller('GridGlobals', function ($scope) {
$scope.GLobGridShowFilter = true;
$scope.GLobGridShowFooter = true;
});
Gridtest.controller('MyCtrl1', function ($scope) {
$scope.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.gridOptions1 = {
data: 'myData',
showFilter: $scope.GLobGridShowFilter,
showFooter: $scope.GLobGridShowFooter
}
});
Gridtest.controller('MyCtrl2', function ($scope) {
$scope.myData = [
{name: "Tom", age: 50},
{name: "Sue", age: 43},
{name: "Jack", age: 27},
{name: "Willy", age: 29},
{name: "Josh", age: 34}
];
$scope.gridOptions2 = {
data: 'myData',
showFilter: $scope.GLobGridShowFilter,
showFooter: false
}
});
Since the ng-grid cdns are currently not reachable via my computer I can't provide you with a plunker. Keep me informed if this works for you. I can create a Plunker Demo as soon as this works again.
Update:
Hey, it's up again! Here is the promised Plunker
See, no rtfm-bs, just plain angular magick.
Update 2:
This will be a lengthy answer again:-)
I don't think there is a way to define a global scope without some tricks. It' simply not in the ngGrid code and you won't find any answer to this in the documentation nor in the sourcecode.
But here is a different approach:
Add a new object to the $rootScope, this is will be available throughout your app.
Gridtest.run(function ($rootScope) {
$rootScope.gridOptionsGlobal = function () {
this.data = 'myData';
this.showFilter = true;
this.showFooter = true;
}
})
Then in your controllers define your gridOptions like this:
Gridtest.controller('MyCtrl1', function ($scope) {
$scope.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.gridOptions = new $scope.gridOptionsGlobal();
});
Gridtest.controller('MyCtrl2', function ($scope) {
$scope.myOtherData = [
{name: "Tom", age: 50},
{name: "Sue", age: 43},
{name: "Jack", age: 27},
{name: "Willy", age: 29},
{name: "Josh", age: 34}
];
$scope.gridOptions = new $scope.gridOptionsGlobal();
//overwiting global settings here
$scope.gridOptions.data = 'myOtherData';
$scope.gridOptions.showFooter = false;
});
This way you don't need the wrapper controller in your html.
Of course you can still put the globals to a controller instead of the $rootScope, to prevent overhead on pages where you don't have a grid.
Here's the updated Plunker
I don't think you can get it more convenient than this.
