绑定Web devexpress dxDataGrid和angular $ scope

Question

我在angular和dxDataGrid中绑定$ scope时遇到问题。

我正在使用devexpress libarary dx.all.js，它为dxDataGrid提供了所有优点。 我有一个div dx-data-grid，试图将选定的行数据传递到$ scope上。

Chrome调试器说我的$ scope.ticketSelected变量和selectedRowsData对象都为null。 这是API http://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Events/?version=14_2#selectionChanged

HTML代码是

角度代码为

    controller('homeController', function($scope, $routeParams) {
        $scope.id = $routeParams.id;
        $scope.ticketSelected = [];     
        $scope.items = [];
$scope.random = function() {
            var s = 55;
            s = Math.sin(s) * 10000;
            s = s - Math.floor(s);
            return s;
        };

    $scope.generateData = function (count) {
        $scope.items = [];
        var i,item;
        var names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty'];
        var company = ['MGPI', 'L & T'];
        var floor = ['GF', 'FF'];
        var bldg = ['S', 'P'];
        var startBirthDate = Date.parse('1/1/1975');
        var endBirthDate = Date.parse('1/1/1992');

        for (i = 0; i < count; i++) {
            $scope.random();
            var insertDate = new Date(startBirthDate + Math.floor($scope.random() * 
                    (endBirthDate - startBirthDate)));
            //insertDate.setHours(12);

            $scope.random();
            var nameIndex = 
                Math.floor($scope.random() * names.length);
            item = {
                wkonum: i + 1,
                requester: names[nameIndex],
                company: company[Math.floor(nameIndex / 5)],
                floor: company[Math.floor(nameIndex / 5)],
                bldg: company[Math.floor(nameIndex / 5)],
                insertDate: insertDate
            };
            $scope.items.push(item);
        }
    };

    $scope.generateData(5000);

    $scope.gridOptions = {
            bindingOptions: {
                dataSource: 'items'//generateData(1000)
            },
            hoverStateEnabled: true,
            paging: {
                enabled: true,
                pageSize:10
            },
            /*editing: {
                editMode: 'row',
                editEnabled: true,
                removeEnabled: true,
                insertEnabled: true,
                removeConfirmMessage: 'Are you sure you want to delete this record?'
            },*/
            selection: {
                mode: 'single'
            },
            customizeColumns: function (columns) {
                columns[0].width = 80;
                columns[1].width = 100;
            },
            onSelectionChange:function(selecteditems){
                $scope.ticketSelected = selecteditems.selectedRowsData;             

            },
            columns: [
                    'wkonum',
                    'requester',
                    'company',
                    'floor',
                    'bldg',
                    'insertDate'
            ]     
        };  

}。

Answer 1

我得出的结论是onSelectionChange没有触发。 我改用了onRowClick并直接使用$ scope，它像一个魅力一样工作。

我不确定我为什么为什么onSelectionChange不起作用，但是onRowClick现在可以做到这一点。 http://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/?version=14_2#onRowClick

 onRowClick:function(e){ $scope.ticketSelected = e.data; }, 

Answer 2

实际上，该事件不是“ onSelectionChanged”，而是“ onSelectionChanged”

Answer 3

仅当选择模式为“多个”而不是单个时，“ onSelectionChanged”才有效。