12

我在 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

4

5 回答 5

10

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>
于 2013-08-23T14:53:00.173 回答
4

只是想我会分享，如果有人有兴趣从单选更改为多选，可以像这样动态完成：

$gridScope.selectionProvider.multi = true / false;
于 2013-12-16T23:43:04.877 回答
2

在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>
于 2013-08-28T08:10:57.317 回答
1

另一种方法是坚持以下内容：

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

然后只需将刷新翻转为关闭，更新网格配置，然后在两个不同的刷新周期中重新打开。

于 2015-09-17T13:25:18.620 回答
0

可能就像我为您编辑的 plnker：这里

请注意，当我使用它时，并非所有选项都令人耳目一新……但您可以在示例中看到一些选项。

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

于 2013-08-23T16:15:44.657 回答