Question

我在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属性。

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

Answer 1

如果您将columnDefs分配给$scope上的某个属性字符串，然后更改数组：http://plnkr.co/edit/wuob1M?p=preview;

，您就可以这样做

在ng-grid上提出的this issue中进行了描述。

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>

Answer 2

以为我会分享一下，如果有人有兴趣从Single Select更改为MultiSelect，它可以像这样动态完成：

$gridScope.selectionProvider.multi = true / false;

Answer 3

在angular forum上找到了一个很好的解决方案。实质上，如果维护了一个配置对象数组，可以像上面的标记一样将各个元素传递给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>

Answer 4

另一种方法是坚持使用：

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

然后只需将刷新设置为关闭，更新网格配置，然后在两个不同的刷新周期中重新启动。

Answer 5

可能就像我为您编辑的那些人一样： Here

请注意我玩它的时间，而不是直播刷新的所有选项......但有些地方可以在示例中看到。

基本上解决方案是将$ scope变量分配给gridOptions的参数。

如何动态配置ng-grid

5 个答案: