Как динамически настроить ng-сетку

У меня есть представление в приложении angularjs, в котором я хочу разрешить пользователю выбирать между различными сетями, настроенными по-разному. В идеале я хотел бы привязать значение, переданное директиве ng-grid к переменной модели, как показано ниже. Однако, хотя этот пример отображает разметку, которая работает, когда простое строковое значение передается в ng-сетку (т.е. <div class="gridStyle" ng-grid="gridOptions1"></div>, динамическая конфигурация не выполняется.

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

Ответ 1

Нашел приятное решение на форуме angular. По сути, если поддерживается массив объектов конфигурации, отдельные элементы могут быть переданы в директиву 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>

Ответ 2

Похоже, вы можете сделать это, если вы присвойте columnDefs строке свойства в $scope, а затем измените массив: http://plnkr.co/edit/wuob1M?p=preview;

Это описано в этой проблеме, поднятой на 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>

Ответ 3

Просто подумал, что я поделился бы тем, что если кто-то заинтересован в изменении с Single Select на MultiSelect, это можно сделать динамически следующим образом:

$gridScope.selectionProvider.multi = true / false;

Ответ 4

Другой способ сделать это - просто вставить что-то вроде:

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

Затем просто переверните обновление до выключения, обновите конфигурацию сетки, а затем вернитесь в режим включения в два разных цикла обновления.

Ответ 5

Возможно, как и плнкер, который я редактировал для вас: Здесь

Обратите внимание, что когда я играл с ним, не все варианты, где живое обновление... Но некоторые из них, как вы можете видеть в этом примере.

В основном решение состоит в том, чтобы иметь переменные $scope, назначенные параметрам gridOptions.