angularjs – 如何动态配置ng网格

我在一个 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',displayName: "Name"},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网格动态接受不同的配置,或者是否有这个限制的解决方法？请注意,我需要重新配置网格的多个属性,而不仅仅是我认为有解决方法的columnDefs和数据属性.

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

如果您将columnDefs分配给$scope上的属性的字符串,然后更改数组,则可能会执行此操作： http://plnkr.co/edit/wuob1M?p=preview;

在this issue上描述了在ng网格上提出的.

JS：

var app = angular.module('myApp',function($scope) {

    $scope.myData = [{name: "Moroni",age: 34}];

    $scope.columnDefs1 = [{ field:"name",displayName: "AGE"}];


    $scope.columnDefs2 = [{ field:"name",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>

angularjs – 如何动态配置ng网格

相关文章