Question

我正在尝试使用Angular指令为Kendo创建一个包含2个外键列的Kendo Grid。我能够让一个人工作，而不是另一个人（彼此独立）。如果我评论一个，另一个将起作用，反之亦然，但无论哪种方式，只有一个将起作用。缩写示例代码如下。

invoicesController.js

app.controller('invoicesController', [
    '$scope', '$rootScope', 'config', 'dataFactory', function($scope, $rootScope, config, dataFactory) {
        $rootScope.title = 'Invoices';

        $scope.filterCustomers = [];
        $scope.filterStatuses = [];

        $scope.invoiceGrid = null;

        var _refreshCustomers = function () {
            dataFactory.get(_.string.format('{0}customers', config.apiUrl)).success(function (result) {
                $scope.filterCustomers = _.map(result, function (cust, key) {
                    return {
                        text: cust.name,
                        value: cust.id
                    }
                });
            });
        };

        var _refreshStatuses = function() {
            dataFactory.get(_.string.format('{0}invoicestatuses', config.apiUrl)).success(function(result) {
                $scope.filterStatuses = _.map(result.data, function(status, key) {
                    return {
                        text: status.name,
                        value: status.id
                    }
                });

                _initializeGrid();
            });
        };

        var _refreshData = function () {
            _refreshCustomers();
            _refreshStatuses();
        };

        _refreshData();

        var _initializeGrid = function() {
            $scope.invoiceGrid = {
                dataSource: {
                        transport: {
                            read: _.string.format('{0}invoices', config.apiUrl),
                            },
                    schema: {
                        data: 'data'
                    },
                    pageSize: 15,
                    sort: { field: 'invoiceDate', dir: 'asc' }
                },
                columns: [
                    { title: 'Subject', field: 'subject', type: 'string', width: '30%'},
                    { title: 'Number', field: 'number', width: '12%' },
                    { title: 'Customer', field: 'customer.id', values: $scope.filterCustomers, width: '15%' },
                    { title: 'Status', field: 'status.id', values: $scope.filterStatuses, width: '14%' },
                    { title: 'Total', field: 'invoiceTotal', type: 'number', format: '{0:c2}', width: '10%' },
                    {
                        title: 'Updated', field: 'updatedOn', type: 'date', format: '{0:d}', width: '19%',
                        template: '#=lastUpdated#'
                    }
                ],
                scrollable: false,
                sortable: true,
                filterable: true,
                pageable: true
            };
        }
    }
]);

dataFactory.js（GET方法）

return $http({
    url: url,
    method: 'GET',
    data: data,
});

list.html

<div data-kendo-grid data-k-ng-delay="invoiceGrid" data-k-options="invoiceGrid" class="top"></div>

Answer 1

我能够使用路由解析来实现此功能。

基本上，当您定义路线时，您可以设置解析器。在这种情况下，我正在解析customers和statuses，您还会在projectsController

上看到这些参数

app.js （路由配置）

// Projects
$routeProvider.when('/projects', {
    templateUrl: '/app/views/projects/list.html',
    controller: 'projectsController',
    resolve: {
        customers: ['customerService', function (customerService) {
            return customerService.getCustomers();
        }],
        statuses: ['projectService', function (projectService) {
            return projectService.getStatuses();
        }]
     }
});

projectsController.js （缩写）

app.controller('projectsController', [
    '$scope', '$rootScope', 'config', 'customers', 'statuses', function($scope, $rootScope, config, customers, statuses) {

        // Set the options from the injected statuses (from the route resolver)
        $scope.statusOptions = _.map(statuses.data.data, function(status) {
            return { value: status.id, text: status.name }
        });

    ....

         // Kendo grid column definition
         columns: [
             { title: 'Status', field: 'status.id', values: $scope.statusOptions, width: '15%' },
         ]

}]);

使用Angular指令的Kendo UI Grid外键列

1 个答案: