web-dev-qa-db-ja.com

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

angularjsng-grid
12
Paul Taylor

角度フォーラム でこれに対する素晴らしい解決策を見つけました。基本的に、構成オブジェクトの配列が維持されている場合は、上記のマークアップのように、個々の要素を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>
2
Paul Taylor

columnDefsを$scopeのプロパティの文字列に割り当ててから、配列を変更すると、それができるように見えます。 http://plnkr.co/edit/wuob1M ？p =プレビュー ;

この問題 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>
10
Davin Tryon

シングルセレクトからマルチセレクトへの変更に興味がある人は、次のように動的に実行できることを共有したいと思います。

$gridScope.selectionProvider.multi = true / false;
4
E Argaman

これを行う別の方法は、次のようなものに固執することです。

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

次に、更新をオフに切り替え、グリッド構成を更新してから、2つの異なる更新サイクルでオンに戻します。

1
chander

私があなたのために編集したplnkerのように可能です：ここ

live refreshing...のすべてのオプションではなく、例でわかるように、いくつかのオプションを試してみました。

基本的に、解決策は、gridOptionsのパラメーターに$ scope変数を割り当てることです。

0
Gilad Peleg