web-dev-qa-db-fra.com

Comment configurer dynamiquement ng-grid

J'ai une vue dans une application angularjs dans laquelle je veux permettre à l'utilisateur de choisir entre différentes grilles configurées différemment. Idéalement, j'aimerais lier la valeur transmise à la directive ng-grid à une variable de modèle, comme illustré ci-dessous. Cependant, bien que cet exemple rend le balisage qui fonctionne lorsqu'une simple valeur de chaîne est transmise à ng-grid (c'est-à-dire <div class="gridStyle" ng-grid="gridOptions1"></div>, la configuration dynamique échoue. 

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>

Quelqu'un peut-il me dire s'il vous plaît s'il existe un moyen de faire en sorte que ng-grid accepte une configuration différente de manière dynamique, ou s'il existe une solution de contournement à cette limitation? Veuillez noter que je dois reconfigurer plusieurs propriétés de la grille, pas seulement les propriétés columnDefs et data, pour lesquelles je pense qu'il existe des solutions de contournement.

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

angularjsng-grid
12
Paul Taylor

J'ai trouvé une bonne solution à cela sur le forum angulaire . Essentiellement, si un tableau d'objets de configuration est maintenu, des éléments individuels peuvent être passés à la directive ng-grid comme dans le balisage ci-dessus. Plunker illustrant la solution ici: 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>
2
Paul Taylor

Il semble que vous puissiez le faire si vous affectez columnDefs à une chaîne d'une propriété sur le $scope, puis modifiez le tableau: http://plnkr.co/edit/wuob1M?p=preview ;

Il est décrit dans ce problème soulevé sur 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>
10
Davin Tryon

Je pensais juste que je dirais que si quelqu'un est intéressé à passer de Single Select à MultiSelect, cela peut se faire de manière dynamique, comme ceci:

$gridScope.selectionProvider.multi = true / false;
4
E Argaman

Une autre façon de faire est simplement de coller quelque chose comme:

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

Ensuite, désactivez l'actualisation, mettez à jour la configuration de la grille, puis réactivez-le dans deux cycles d'actualisation différents.

1
chander

Il est possible que le pilote que j’ai édité pour vous:Here

Veuillez noter que lorsque je joue avec, pas toutes les options où live rafraîchissant ... Mais certaines où, comme vous pouvez le voir dans l'exemple.

Fondamentalement, la solution consiste à attribuer des variables $ scope aux paramètres de gridOptions.

0
Gilad Peleg