Angular UI 网格 - 如何更改行的视图 select

Question

我有一个显示数据的网格。我希望能够通过单击网格行来路由到新视图。现在我什至无法注册一行 click/selection。我在我的网格定义中尝试过：

    onRegisterApi: function (gridApi ) {
        $scope.gridApi = gridApi;
        gridApi.selection.on.onRowSelectionChanged($scope, function (rows) {
            $scope.mySelections = gridApi.selection.getSelectedRows();                
        });
    },

在 html 中调用 mySelections:

    <p>{{mySelections}}</p>

这会导致错误：无法读取未定义的属性 'on'。但是，我不知道什么是 'undefined'.

我也试过一个单独的函数：

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope, function (row) {
        alert(row.isSelected);
        //$scope.mySelections = gridApi.selection.getSelectedRows();                
    });
};

但它returns同样的错误。

我已将 ui.grid 和 ui.grid.selection 添加到我的 angular.module。我很想找到一个使用 rowselect link 到新页面的实际示例，但我必须找到任何东西。

Answer 1

Cannot read property 'on' of undefined.

表明 selection 属性在您的 gridApi 对象上不可用，我会仔细检查您是否确实以正确的方式添加了依赖项：

angular.module('app', [
    'ui.grid',
    'ui.grid.selection'
]);

接下来，调用 gridApi.selection.on.onRowSelectionChanged 将不起作用，因为调用的方法是 rowSelectionChanged 而不是 onRowSelectionChanged。你在第二个例子中做对了。对于其余的代码，您的代码似乎没问题，也许您的网格定义的其余部分有问题。这是一个使用 ui.router 进行视图更改的示例：

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    multiSelect: false,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
        gridApi.selection.on.rowSelectionChanged($scope, function (rows) {
            var selection = gridApi.selection.getSelectedRows();
            $state.go('item', {item: selection[0]});
        });
    }
};

http://plnkr.co/edit/Rs9M6pJd83vK8syr3W9g?p=preview

Answer 2

不要忘记将 "ui-grid-selection" 属性添加到您的 DIV :

 <div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ... ></div>

Angular UI 网格 - 如何更改行的视图 select

Angular UI Grid - how to change view on row select

angularjs

angular-ui-grid