1

Kendo の Angular ディレクティブを使用して、2 つの外部キー列を持つ Kendo Grid を作成しようとしています。私は一方を機能させることができますが、もう一方は機能させません（互いに独立しています）。一方をコメントアウトすると、もう一方が機能し、その逆も同様ですが、どちらの方法でも機能するのは 1 つだけです。簡略化されたサンプル コードは次のとおりです。

請求書Controller.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>
4

1 に答える 1

0

ルート解決を使用してこれを機能させることができました。

基本的に、ルートを定義するときにリゾルバーを設定できます。この場合、私は解決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%' },
         ]

}]);
于 2014-08-28T18:35:58.320 に答える