Question

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

Answer 1

使用ui-grid，api与Aidan发布的ng-grid示例略有不同。

通常你会听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作为表单的目标。您可能需要关闭多选（检查选择gridOptions或选择教程），并处理未选择行时发生的情况。

在我的应用程序中，我倾向于将表单作为弹出窗口（模态或单独的页面）。当我这样做时，它更简单，我只是对行本身进行点击事件，或者（更常见的）行上的按钮。有关示例，请参阅http://ui-grid.info/docs/#/tutorial/305_appScope。您可以将单击的行传递给该单击处理程序：

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

然后你可以将实体（可能是一个ngResource）传递给那个模态，一旦它编辑它，它就可以在资源完成时调用save。

我在基于ng（网格）的教程系列中做了类似的事情：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;
                    }
};

希望这能让你开始。

艾

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

2 个答案: