Comment configurer dynamiquement ng-grid

J'ai vue dans une application angularjs dans laquelle je veux permettre à l'utilisateur de choisir entre plusieurs configuré différemment les grilles. Idéalement, je voudrais lier la valeur passée à la ng-grille de la directive à une variable du modèle, comme illustré ci-dessous. Cependant, bien que cet exemple rend le balisage qui fonctionne quand une simple chaîne de valeur est transmise à ng-grille (ie. <div class="gridStyle" ng-grid="gridOptions1"></div>la configuration dynamique d'échec.

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 me dire s'il vous plaît si il existe un moyen d'obtenir ng-grille d'accepter une configuration différente dynamiquement, ou si il ya une solution à cette limitation? Veuillez noter que j'ai besoin de reconfigurer les multiples propriétés de la grille, et pas seulement les columnDefs et data propriétés pour lesquelles je crois qu'il y a des solutions de rechange.

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

source d'informationauteur Paul Taylor

angularjs ng-grid

Il semble que vous pouvez le faire si vous affectez columnDefs à une chaîne d'un bien sur le $scope et ensuite modifier le tableau: http://plnkr.co/edit/wuob1M?p=preview;

Il est décrit dans ce problème soulevées sur ng-grille.

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>

4

Juste pensé que je voudrais vous dire que si quelqu'un est intéressé à changer de sélection Unique pour MultiSelect il peut être fait de façon dynamique comme suit:
```
$gridScope.selectionProvider.multi = true / false;
```

Trouvé une belle solution à ce sur le angulaire forum. Essentiellement, si un tableau de config objets est maintenu, les éléments individuels peuvent être transmis à la ng-grille directive dans les balises ci-dessus. Plunker illustrant 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>

1

Une autre façon de le faire est de simplement s'en tenir à quelque chose comme:
```
<div ng-grid="gridOptions" ng-if="refresh"></div>
```
Ensuite il suffit de retourner l'actualisation off, mise à jour de la grille de config, puis de nouveau à on dans deux différents cycles de rafraîchissement.
0

Il est possible, comme le plnker que j'ai édité pour vous: Ici

Veuillez noter que lorsque j'ai joué avec elle, toutes les options ne où vivre rafraîchissante... Mais certains où comme vous pouvez le voir dans l'exemple.

Fondamentalement, la solution est d'avoir $champ d'application les variables assignées à l'params de gridOptions.

Vous devez vous connecter pour publier un commentaire.