绑定 web devexpress dxDataGrid 和 angular $scope答案

【问题标题】：Binding web devexpress dxDataGrid and angular $scope绑定 web devexpress dxDataGrid 和 angular $scope
【发布时间】：2015-07-14 21:48:59
【问题描述】：

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

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

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

HTML 代码是

Angular 代码是

    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'
            ]     
        };

})。

【问题讨论】：

这里是使用的库 jquery-2.1.3.min.js angularjs/1.3.11/angular.min.js angularjs/1.3.11/angular-sanitize.js globalize/0.1.1/ globalize.min.js

标签： javascript angularjs datagrid devexpress

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

【讨论】：

【解决方案2】：

实际上事件不是“onSelectionChange”而是“onSelectionChanged”

【讨论】：

【解决方案3】：

"onSelectionChanged" 仅在选择模式为“多个”而非单一时有效。

【讨论】：