使用AngularJS創建具有可重用選項的kendo-grid

Question

如何使用AngularJS創建具有可重用選項的kendo-grid？

除默認設置外，網格還必須動態包含復選框列，並選擇所有行。 處理選擇的方法應該是指令的一部分，並且不知何故，我應該能夠訪問在控制器中選擇的行。

另一個重要的行為是保持對網格的引用：

// In the controller : $scope.grid
<div kendo-grid="grid" k-options="gridOptions"></div>

在我想象的初始路徑下面，但它不是100％工作，因為AngularJS不能從checkbox列中編譯信息，所以不要調用controller指令的方法。 同時我不確定在這段代碼中強制$編譯的位置。

myApp.directive('myApp', ['$compile', function ($compile) {
    var directive = {
        restrict: 'A',
        replace: true,
        template: '<div></div>',
        scope: {
            gridConfiguration: '='
        },
        controller: function ($scope) {

            $scope.gridIds = [];
            $scope.gridIdsSelected = [];

            var updateSelected = function (action, id) {
                if (action === 'add' && $scope.gridIdsSelected.indexOf(id) === -1) {
                    $scope.gridIdsSelected.push(id);
                }
                if (action === 'remove' && $scope.gridIdsSelected.indexOf(id) !== -1) {
                    $scope.gridIdsSelected.splice($scope.gridIdsSelected.indexOf(id), 1);
                }
            };

            $scope.updateSelection = function ($event, id) {
                var checkbox = $event.target;
                var action = (checkbox.checked ? 'add' : 'remove');
                updateSelected(action, id);
            };

            $scope.isSelected = function (id) {
                return $scope.gridIdsSelected.indexOf(id) >= 0;
            };

            $scope.selectAll = function ($event) {
                var checkbox = $event.target;
                var action = (checkbox.checked ? 'add' : 'remove');
                for (var i = 0; i < $scope.gridIds.length; i++) {
                    var id = $scope.gridIds[i];
                    updateSelected(action, id);
                }
            };
        },
        link: function ($scope, $element, $attrs) {
            var baseColumns = [
                {
                    headerTemplate: '<input type="checkbox" id="selectAll" ng-click="selectAll($event)" ng-checked="isSelectedAll()">',
                    template: '<input type="checkbox" name="selected" ng-checked="isSelected(#=Id#)" ng-click="updateSelection($event, #=Id#)">',
                    width: 28
                }
            ];

            for (var i = 0; i < $scope.gridConfiguration.columns.length; i++) {
                var column = $scope.gridConfiguration.columns[i];
                baseColumns.push(column);
            }

            var gridOptions = {...};

            var grid = $element.kendoGrid(gridOptions).data("kendoGrid");;
            $scope.$parent[$attrs[directive.name]] = grid;
        }
    };

    return directive;
}]);

Answer 1

我在這里提出了一個示例指令： http ： //embed.plnkr.co/fQhNUGHJ3iAYiWTGI9mn/preview

它在my-grid屬性上激活並插入復選框列。 復選框綁定到每個項目的selected屬性（請注意，它是一個Angular模板，它使用dataItem來引用當前項目）。 要找出所選項目，您可以執行以下操作：

var selection = $scope.grid.dataSource.data().filter(function(item){
    return item.selected;
});

標題中添加的復選框將切換選擇。

HTH。

Answer 2

@rGiosa是對的，我試過這樣做：

var options = angular.extend({}, $scope.$eval($attrs.kOptions));
options['resizable']= true;

似乎在options對象中添加屬性但是網格仍然無法調整大小為什么？ http://plnkr.co/edit/Lc9vGKPfD8EkDem1IP9V?p=preview

編輯：顯然，網格的選項不能動態更改。 您需要使用不同的選項重新創建整個網格，以便動態地禁用/啟用它們？！

干杯