无法在ui.grid中检测到行选择

Question

我有一个处理选择的角度ui网格，我想用所选记录的内容填充表单。我看不到引用所选记录或检测行选择已发生的方法。有什么想法吗？

Answer 1

使用ui网格，api与Aidan发布的ng网格示例有点不同。

通常您会监听rowSelectionChanged事件，请参阅：http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi

这看起来像以下内容：

$scope.selectionChanged = function( rowChanged ) {
  if( rowChanged.isSelected ){
    $scope.targetRow = rowChanged;
  }
};
gridOptions = {
  // other stuff
  onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
    $scope.gridApi.selection.on.rowSelectionChanged($scope, $scope.selectionChanged);
  } 
};

然后，您应该能够使用$scope.targetRow作为表单的目标。您可能需要关闭multiselect（查看选择网格选项或选择教程），并处理未选择行时发生的情况。

在我的应用程序中，我倾向于将表单作为弹出窗口（模式或单独的页面）。当我这样做的时候，它要简单得多，我只需要在行本身上做一个点击事件，或者（更常见的）在行上做一次按钮。也许可以参考http://ui-grid.info/docs/#/tutorial/305_appScope例如。您可以将单击的行传递到该单击处理程序中：

cellTemplate:'<button ng-click="grid.appScope.openModal( row.entity )">Edit</button>' }

然后，您可以将实体（它将是一个ngResource）传递到该模式中，一旦它编辑了它，那么它就可以在完成后调用资源上的save。

我在我的（基于网格的）系列教程中做了类似的事情：https://technpol.wordpress.com/2013/11/09/angularjs-and-rails-4-crud-application-using-ng-boilerplate-and-twitter-bootstrap-3-tutorial-index/

Answer 2

通常会发布您尝试过的内容，请以后考虑。以下是一个利用ng-grid的afterSelectionChange事件的简短示例：

带有两个div的网格，用于保存选定的数据：

<div class='gridStyle' ng-grid='testGridOptions'></div>
<div>{{current.name}}</div>
<div>{{current.age}}</div>

一些测试数据：

$scope.testData = [{name:'John', age:25}, 
                   {name:'Mary', age:30}, 
                   {name:'Fred', age:10}, 
                   {name:'Joan', age:20}];

电网配置：

$scope.testGridOptions = {
                    data: 'testData', 
                    multiSelect: false,
                    afterSelectionChange: function(data){
                        $scope.current = data.entity;
                    }
};

希望这能让你开始。

Aidan