3

剣道角度グリッドの構造を動的に構築しようとしています。k-options私の問題は、属性が評価されるときにグリッド オプションが不明であるため、グリッドがデータソースのすべての列にバインドされていることです。

HTMLは次のとおりです。

<div kendo-grid k-options="{{gridModel.options}}" 
    k-data-source="gridModel.myDataSource">
</div>

そして、ここにコントローラーのJavaScriptがあります：

// this is called after the api call has successfully returned with data
function getSucceeded(){
    ...
    $scope.gridModel.options = function(){
        // function that properly builds options object with columns, etc.
    }
    // this is just shown for example... the data is properly loading
    $scope.gridModel.myDataSource.data(ds.data()); 
}

データは適切にロードgridModel.optionsされていますが、success メソッドによって設定される前に HTML で評価されたため、データは基本的に無視され、データソースのすべての列がレンダリングされています。

gridModel.optionsが静的な場合、これはチャンピオンのように機能します。

k-optionsコントローラーによって設定された後、評価を延期したり、再評価を強制したりするにはどうすればよいですか?

4

3 に答える 3

7

私はそれを理解することができました。私は4つのことをしなければなりませんでした：

  1. angularjs のバージョンを更新します (ディレクティブがない 1.08 を使用していましたng-if)。1.2.0rc3にアップデートしました。
  2. kendo-grid div私を包みますng-if div
  3. 私の機能を呼び出してください！関数に設定$scope.gridModel.options しているだけでした-実際に関数を呼び出す必要があったため、関数から返された値に変数を設定していました。
  4. angular.module宣言を更新して含める必要がありngRouteました（1.2.xで独自のモジュールに分離されていることに基づいています）。

更新された HTML は次のとおりです。

<div data-ng-if="contentAvailable">
    <div kendo-grid k-options="{{gridModel.options}}" 
        k-data-source="gridModel.myDataSource">
    </div>
</div>

そして、これが更新されたコントローラーです（表示されていません：$scope.contentAvailable=false;コントローラーの先頭に設定しました）：

// this is called after the api call has successfully returned with data
function getSucceeded(){
    ...
    $scope.gridModel.options = function(){
        // function that dynamically builds options object with columns, etc.
    }(); // <----- NEED to invoke function!!

    // this is just shown for example... the data is properly loading
    $scope.gridModel.myDataSource.data(ds.data()); 

    $scope.contentAvailable=true; // trigger the ng-if
}

私は実際に関数をconfigファイルに移動したので、あまりにも多くの構成コードでコントローラーを汚染していません。これを理解できてとても幸せです。

于 2013-10-14T21:29:33.153 に答える
2

「Controller As」構文、動的列、およびページングを使用したサンプルを次に示します。

var app = angular.module("app", ["kendo.directives"]);

function MyCtrl() {
  var colsList = [{
    name: "col1"
  }, {
    name: "col2"
  }, {
    name: "col3"
  }, {
    name: "col4"
  }];
  var gridCols = [];
  var iteration = 1;

  var vm = this;
  vm.gridOptions = {
    columns: gridCols,
    dataSource: new kendo.data.DataSource({
      pageSize: 10
    }),
    pageable: true
  };

  vm.buildGrid = function() {
    var data = {};

    vm.gridOptions.columns = [];
    for (var x = 0; x < colsList.length; x++) {
      if (iteration % 2 === 0 && x === colsList.length - 1) continue;

      var col = {};
      col.field = colsList[x].name;
      col.title = colsList[x].name;
      data[col.field] = "it " + iteration + " " + (1111 * (x + 1));
      vm.gridOptions.columns.push(col);
    }
    // add one row to the table
    vm.gridOptions.dataSource.add(data);
    iteration++;
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>

<body ng-app="app">

  <div ng-controller="MyCtrl as vm">
  <button ng-click="vm.buildGrid()">Build Grid</button>
  <div kendo-grid="grid" k-options="vm.gridOptions" k-rebind="vm.gridOptions"></div>
    </div>

</body>

于 2015-04-28T18:19:27.093 に答える
0

これにはk-rebind ディレクティブを使用できます。ドキュメントから：

オプション変更時のウィジェットの更新

コントローラーからウィジェットを更新できます。特殊な k-rebind 属性を使用して、スコープ変数が変更されたときに自動的に更新されるウィジェットを作成します。このオプションは元のウィジェットを破棄し、変更されたオプションを使用して再作成します。

通常のように GridOptions で列の配列を設定する以外に、それへの参照を保持する必要があります。

        vm.gridOptions = { ... };
        vm.gridColumns = [{...}, ... ,{...}];
        vm.gridOptions.columns = vm.gridColumns;

次に、その変数を k-rebind ディレクティブに渡します。

        <div kendo-grid="vm.grid" options="vm.gridOptions" k-rebind="vm.gridColumns">
        </div>

グリッドをリモート データ (私の場合は OData) にバインドしているときは、これで終わりです。これで、列の配列に対して要素を追加または削除できます。グリッドは、データが再作成された後、再度クエリを実行します。

Grid をローカル データ (オブジェクトのローカル配列) にバインドする場合、ウィジェットが再作成されるまでデータのバインドを延期する必要があります。私にとってうまくいったのは（おそらくこれに対するよりクリーンな解決策があるかもしれません）、 $timeout サービスを使用することです：

        vm.gridColumns.push({ ... });

        vm.$timeout(function () {
            vm.gridOptions.dataSource.data(vm.myArrayOfObjects);
        }, 0);

これは、AngularJS v1.5.0 および Kendo UI v2016.1.226 を使用してテストされています。

于 2016-03-15T21:16:42.050 に答える