在角度控制器中动态创建剑道网格列答案

【问题标题】：Dynamically creating kendo-grid columns in angular controller在角度控制器中动态创建剑道网格列
【发布时间】：2013-10-22 05:44:30
【问题描述】：

我正在尝试动态构建剑道角网格的结构。我的问题是在评估 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 在被成功方法设置之前在 HTML 中进行了评估，所以它基本上被忽略了，并且正在呈现数据源中的所有列。

当gridModel.options 是静态的时，这就像一个冠军。

如何推迟对 k-options 的评估和/或在控制器设置它们后强制重新评估？

【问题讨论】：

这种方法可能对你有帮助stackoverflow.com/questions/19296500/…
感谢@Chandermani - 这很有帮助，最终成为解决方案的一部分。

标签： javascript angularjs kendo-ui kendo-grid

【解决方案1】：

我能够弄清楚。我必须做四件事：

更新我的 angularjs 版本（我在 1.08 上没有 ng-if 指令）。我更新到 1.2.0rc3。
将我的kendo-grid div 包裹在ng-if div
调用我的函数！我只是将$scope.gridModel.options 设置为一个函数 - 我需要实际调用该函数，因此我将变量设置为 from 该函数返回的值。李>
我必须更新我的 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 文件中，这样我就不会用太多的配置代码污染控制器。很高兴知道这一点。

【讨论】：

你不必做function(){...}();，你可以简单地做<div k-options="gridModel.options()">。注意()

【解决方案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>

【讨论】：

【解决方案3】：

我们可以为此使用 k-rebind 指令。来自文档：

Widget Update upon Option Changes

您可以从控制器更新小部件。使用特殊的 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 进行了测试。

【讨论】：