ui-grid 3.0.0中的selectedItem

时间:2015-01-28 13:43:10

标签: angularjs angular-ui-grid

我正在测试角度ui-grid 3.0.0。以下是旧版本的示例代码,selectedItems在选中时应包含一些对象。在版本3中,它似乎不起作用。有人遇到过同样的行为吗?

Angularjs版本:1.3.11 Angular-ui-grid:3.0.0-rc.16 这是我控制器的一些提取代码:

$scope.gridOptions = {  };
$scope.mySelections = [];

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    modifierKeysToMultiSelect: true,
    multiSelect: true,
    pagingPageSize: 25,
    useExternalPagination: true,
    useExternalSorting: true,
    selectedItems: $scope.mySelections
};

$scope.changeDelete = function () {
    $log.debug('Selection length = ' + $scope.mySelections.length);
    if ($scope.mySelections.length > 0) {
        $location.path("/EREditHospitalChange/");
    }
    $location.path("/EREditHospitalChange/LYNDA");

}

// mySelections.length始终为0.

他在html页面中的网格声明:

<div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination ui-grid-edit class="grid"></div>

<pre>{{mySelections}}</pre>
</fieldset>
<button ng-click="changeDelete()">Change/Delete</button>

[] This is what is visible in {{mySelections}}

2 个答案:

答案 0 :(得分:8)

您应该使用gridApi.selection。请参阅http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi上的文档和教程:http://ui-grid.info/docs/#/tutorial/210_selection

在你的gridOptions中,添加:

$scope.mySelections = [];

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    modifierKeysToMultiSelect: true,
    multiSelect: true,
    pagingPageSize: 25,
    useExternalPagination: true,
    useExternalSorting: true,
    // Addition:
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
        gridApi.selection.on.rowSelectionChanged($scope,function(rows){
            $scope.mySelections = gridApi.selection.getSelectedRows();
        });
    }
};

以下是关于Plunker的工作示例:http://plnkr.co/edit/u5pzISURTnvPBm9FyiLr?p=preview

此外,您可以移除$scope.gridOptions = { },因为在此之后使用属性声明对象非常有效

答案 1 :(得分:1)

尝试使用:

$scope.gridOptions = your grid options

$scope.gridOptions.onRegisterApi = function (gridApi) {
     $scope.gridApi = gridApi;
}
$scope.delete = function() {
    var rows = scope.gridApi.selection.getSelectedRows();
}

这些或那种方式在$ scope.gridApi。*中,如果你试图获取它的复选框选择