如何動態配置ng-grid

我在angularjs應用程序中有一個視圖，我想讓用戶在各種不同配置的網格之間進行選擇。理想情況下，我想將傳遞給ng-grid指令的值綁定到模型變量，如下所示。然而，儘管這個例子呈現標記時一個簡單的字符串值傳遞給NG-電網的作品（即<div class="gridStyle" ng-grid="gridOptions1"></div>，動態配置失敗。如何動態配置ng-grid

var app = angular.module('myApp', ['ngGrid']); 
app.controller('MyCtrl', function($scope) { 
    $scope.option; 
    $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', 
         columnDefs: [{ field:"name", displayName: "NAME"}, 
            { field:"age", displayName: "AGE"}], 
         multiSelect: true }; 

    $scope.gridOptions2 = { data: 'myData', 
         columnDefs: [{ field:"name", displayName: "Name"}, 
            { field:"age", displayName: "Age"}], 
         multiSelect: false }; 

}); 

<body ng-controller="MyCtrl"> 
    <label>Show me:</label> 
    <input type="radio" name="option" ng-model="option" value="gridOptions1">Grid A</input> 
    <input type="radio" name="option" ng-model="option" value="gridOptions2">Grid B</input> 
    <div class="gridStyle" ng-grid="{{option}}"></div> 
</body>

誰能告訴我請，如果有越來越NG-的一種方式grid是否動態地接受不同的配置，或者是否有解決此限制的方法？請注意，我需要重新配置網格的多個屬性，而不僅僅是columnDefs和data屬性，我相信這些屬性有解決方法。 Plunker：http://plnkr.co/edit/mdXrq6?p=preview

來源

2013-08-23 Paul Taylor

在angular forum上找到了很好的解決方案。實質上，如果維護一個配置對象數組，可以像上面的標記一樣將單個元素傳遞給ng-grid指令。 Plunker說明這裏的解決方案：http://plnkr.co/edit/TDGKRo?p=preview

var gridOptions1 = { 
    data: 'myData', 
    columnDefs: [ 
     { field:"name", displayName: "NAME"}, 
     { field:"age", displayName: "AGE"}], 
    multiSelect: true, 
    selectedItems: $scope.selected 
}; 

var gridOptions2 = { 
    data: 'myData', 
    columnDefs: [ 
     { field:"name", displayName: "Name"}, 
     { field:"age", displayName: "Age"}], 
    multiSelect: false, 
    selectedItems: $scope.selected 
}; 

$scope.filterTabs = [{grid: gridOptions1}, {grid: gridOptions2}]; 

<ol> 
    <li ng-repeat="tab in filterTabs"> 
     <div class="gridStyle" ng-grid="tab.grid"></div>       
    </li> 
</ol>

來源

2013-08-28 08:10:57

那麼你現在怎麼可以在一天之內改變gridoptions呢？我試過這種方式：http://plnkr.co/edit/FfnbLhgllUgysN8ZUJZP?p=preview但我沒有運氣。 – Clem

@Clem你不能。它只是被網格識別並且行爲不同的列決定或數據。例如多選只能在nggrid初始化時啓用或禁用:-( – Sebastian

看起來像你可以這樣做，如果你將columnDefs分配給$scope上的一個屬性的字符串，然後更改數組：http://plnkr.co/edit/wuob1M?p=preview;

在ng-grid上提出的this issue中有描述。

JS：

var app = angular.module('myApp', ['ngGrid']); 
app.controller('MyCtrl', 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.columnDefs1 = [{ field:"name", displayName: "NAME"}, 
            { field:"age", displayName: "AGE"}]; 


    $scope.columnDefs2 = [{ field:"name", displayName: "Name"}, 
            { field:"age", displayName: "Age"}];        


    $scope.gridOptions = { data: 'myData', 
         columnDefs: 'columnDefs1', 
         multiSelect: true }; 

    $scope.switchColumnDefs = function() { 

     $scope.columnDefs1 = $scope.columnDefs2; 



    } 

});

HTML：

<body ng-controller="MyCtrl"> 
     <label>Show me:</label> 
     <a ng-click="switchColumnDefs()">Switch Options</a> 
     <div class="gridStyle" ng-grid="gridOptions"></div> 
    </body>

來源

2013-08-23 14:53:00

你是對的，你可以像這樣動態重寫列定義，但正如我在問題中提到的，我需要改變網格的多個屬性，所以我正在尋找一種重新分配整個配置對象的方法。 –

太棒了！它的工作原理，謝謝！ – Alexandr

有可能像我編輯爲您plnker：Here

請注意，當我和它玩，不所有選項，其中生活更新 ...但有些地方，你可以在考試中看到PLE。

基本上解決方案是將$ scope變量分配給gridOptions的參數。

來源

2013-08-23 16:15:44

它只更新columndefs，多選仍處於啓用狀態。 – Sebastian

只是想我會分享，如果任何人有興趣從單個選擇更改爲多選，可以動態完成，像這樣：

$gridScope.selectionProvider.multi = true/false;

來源

2013-12-16 23:43:04

你從哪裏得到$ gridScope？ – Sebastian

Thx！你讓我的一天!! @Sebastian：你可以在'$ scope.gridOptions（。$ gridScope ...）' – mettjus

另一種方法這是隻粘在類似：

<div ng-grid="gridOptions" ng-if="refresh"></div>

然後，只需翻轉刷新掉，更新網格配置，然後再返回到在兩個不同的REFR esh週期。

來源

2015-09-17 13:25:18 chander

我從JSON文件加載網格選項，對我來說，我做了這個。

– ryanp102694

如何動態配置ng-grid

回答

相關問題