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

У меня есть представление в приложении angularjs, в котором я хочу позволить пользователю выбирать между различными по-разному настроенными сетками. В идеале я хотел бы связать значение, переданное в директиву ng-grid, с переменной модели, как показано ниже. Однако, хотя этот пример отображает разметку, которая работает, когда простое строковое значение передается в ng-grid (т.е. <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 свойства, для которых я считаю, есть обходные пути.

Плункер: http://plnkr.co/edit/mdXrq6?p=preview

Источник

5 ответов

Решение

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

Похоже, вы можете сделать это, если вы назначите 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>
Источник

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

$gridScope.selectionProvider.multi = true / false;
Источник

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

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

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

Источник

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

Пожалуйста, обратите внимание, когда я играл с ним, не все варианты, где живое обновление... Но некоторые, где, как вы можете видеть в примере.

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

Источник
Другие вопросы по тегам