angularjs - 选择 ui 网格 1 行时选择 ui 网格 2 行（反之亦然）

Question

我有两个具有相同数据的网格。我的目标是当在一个网格中选择一行时，另一个网格中的相应行也被选中。Plunker：http ://plnkr.co/edit/BBfMxvsv0OUsjiqblBJQ?p=preview

我正在选择这样的网格：

 onRegisterApi: function(gridApi) {
    console.log('Loaded Grid API 1');
    $scope.gridApi1 = gridApi;
    $scope.mySelectedRows1 = gridApi.selection.getSelectedRows();
    }

提前致谢

Answer 1

onRegisterApi将您的第一个网格更新为如下内容：

 onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 1');
      $scope.gridApi1 = gridApi;
      $scope.mySelectedRows1 = gridApi.selection.getSelectedRows();

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.selectedRow = row.entity;
        $scope.gridApi2.selection.selectRow($scope.selectedRow);
      });
    }

我正在绑定 rowSelectionChanged事件第一个网格，因此，当用户选择一行时，它会被触发。我将选定的行存储在$scope.selectedRow

通过调用 API 选择第二个网格：selectRow。请注意，您必须传递行实体才能获得正确的选择：

$scope.gridApi2.selection.selectRow($scope.selectedRow); <-- selectedRow is row entity

最后，你会得到这样的东西：

$scope.gridOptions1 = {
    saveFocus: false,
    saveScroll: true,
    enableFiltering: true,
    enableGridMenu: true,
    onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 1');
      $scope.gridApi1 = gridApi;

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.gridApi2.selection.selectRow(row.entity);
      });
    }
  };


  $scope.gridOptions2 = {
    saveFocus: false,
    saveScroll: true,
    enableFiltering: true,
    enableGridMenu: true,
    onRegisterApi: function(gridApi) {
      console.log('Loaded Grid API 2');
      $scope.gridApi2 = gridApi;

      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        $scope.gridApi1.selection.selectRow(row.entity);
      });
    }
  };