Question

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

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

在html中调用mySelections：

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

导致错误：无法读取属性＆＃39; on＆＃39;未定义的。但是，我无法说出什么是未定义的＆＃39;。

我还尝试了一个单独的功能：

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

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

但它返回相同的错误。

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

Answer 1

无法读取未定义的属性'

建议您的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

别忘了添加＆＃34; ui-grid-selection＆＃34;归因于你的DIV：

＆＃13;

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

＆＃13;

Angular UI Grid - 如何在行选择上更改视图

2 个答案: