Jak dynamicznie skonfigurować ng-grid

Mam widok w aplikacji angularjs, w której chcę pozwolić użytkownikowi na wybór pomiędzy różnymi skonfigurowanymi siatkami. Idealnie chciałbym powiązać wartość przekazaną do dyrektywy ng-grid ze zmienną modelu, jak pokazano poniżej. Jednak, chociaż ten przykład świadczy znaczników nie działa, gdy prosty ciąg znaków jest przekazywana do NG-grid (tj. <div class="gridStyle" ng-grid="gridOptions1"></div> dynamiczna konfiguracja nie powiedzie się.Jak dynamicznie skonfigurować 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>

Czy ktoś może mi powiedzieć, proszę, czy istnieje sposób na uzyskanie ng- siatka przyjąć inną konfigurację dynamicznie, lub jeśli istnieje obejście tego ograniczenia? Należy pamiętać, że trzeba zmienić konfigurację wielu właściwości sieci, a nie tylko columnDefs i data właściwości, które wierzę, że istnieją rozwiązania.

Plunker: http://plnkr.co/edit/mdXrq6?p=preview

Źródło

2013-08-23 Paul Taylor

Znaleziono dobre rozwiązanie tego na angular forum. Zasadniczo, jeśli utrzymywana jest tablica obiektów konfiguracyjnych, poszczególne elementy mogą być przekazywane do dyrektywy ng-grid, tak jak w powyższym znaczniku. Plunker ilustrujący rozwiązanie tutaj: 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>

Źródło

2013-08-28 08:10:57

Więc jak dokładnie możesz teraz zmienić opcje siatki? Próbowałem w ten sposób: http://plnkr.co/edit/FfnbLhgllUgysN8ZUJZP?p=preview, ale bez powodzenia dla mnie. – Clem

@Clemu nie możesz. To tylko columndefs lub dane, które są rozpoznawane przez sieć i działają inaczej. na przykład multiselect będzie włączony lub wyłączony tylko podczas inicjalizacji nggrid :-( – Sebastian

Wygląda na to, że możesz to zrobić, jeśli przypisujesz columnDefs do ciągu ciągu znaków na $scope, a następnie zmienisz tablicę: http://plnkr.co/edit/wuob1M?p=preview;

Jest to opisane w this issue podniesione na ng-grid.

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>

Źródło

2013-08-23 14:53:00

Masz rację, możesz dynamicznie zastąpić takie definicje kolumn, ale jak wspomniałem w pytaniu, muszę zmienić wiele właściwości siatki, więc szukam sposobu na ponowne przypisanie całego obiektu konfiguracji. –

Świetnie! Działa, dzięki! – Alexandr

Możliwe jest jak plnker że edytowana dla Ciebie: Here

Proszę zauważyć, kiedy grałem z nim, nie wszystkie opcje, w których odświeżanie na żywo ... Ale niektóre, jak widać na egzaminie ple.

Zasadniczo rozwiązaniem jest posiadanie zmiennych $ scope przypisanych do parametrów gridOptions.

Źródło

2013-08-23 16:15:44

To tylko aktualizacja columndefs, multiselect jest nadal włączony. – Sebastian

Pomyślałem, że podzielę się, że jeśli ktoś jest zainteresowany zmianą od Single Select to wielokrotny można to zrobić tak dynamicznie jak:

$gridScope.selectionProvider.multi = true/false;

Źródło

2013-12-16 23:43:04

Skąd otrzymasz $ gridScope? – Sebastian

Thx! Zrobiłeś mój dzień !! @Sebastian: możesz go pobrać na '$ scope.gridOptions (. $ gridScope ...) ' – mettjus

Innym sposobem, aby zrobić to jest po prostu trzymać w coś takiego:

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

wtedy właśnie odwrotną odświeżania na oFF, zaktualizuj config siatki, a następnie z powrotem na w dwóch różnych Refr cykle esh.

Źródło

2015-09-17 13:25:18 chander

Ładuję opcje siatki z pliku JSON, dla mnie zrobiłem to.

– ryanp102694

Jak dynamicznie skonfigurować ng-grid

Odpowiedz

Powiązane problemy