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

プランカー: http://plnkr.co/edit/mdXrq6?p=preview

4

5 に答える 5

4

Just thought I'd share that if anyone is interested in changing from Single Select to MultiSelect it can be done dynamically like so:

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

angularフォーラムでこれに対する良い解決策を見つけました。基本的に、構成オブジェクトの配列が保持されている場合、個々の要素を上記のマークアップのように 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>
于 2013-08-28T08:10:57.317 に答える