角度 ui-grid 事件：已选择行答案

【问题标题】：angular ui-grid event: row selected角度 ui-grid 事件：已选择行
【发布时间】：2015-05-28 14:44:31
【问题描述】：

我正在尝试根据在 ui-grid 上选择一行来启用/禁用按钮。如果没有选择任何行，则该按钮被禁用。

我发现这个plunkr 使用旧的 ng-grid 在选择一行后触发事件的方式。

  $scope.gridOptions = { 

  data: 'myData', 
  selectedItems: $scope.selections,
  enableRowSelection: true,

  afterSelectionChange:function() {
        if ($scope.selections != "" ) {
            $scope.disabled = false;
        } else {
            $scope.disabled = true;
        }
  }
};

不幸的是，它不起作用，我在 ui-grid documentation 中没有发现此类事件的迹象。

如何使用 ui-grid 实现这一点？

【问题讨论】：

标签： javascript angularjs angular-ui-grid

【解决方案1】：

在 ui-grid 中，您在“rowSelectionChanged”事件上注册一个回调函数

 $scope.gridOptions.onRegisterApi = function (gridApi) {
                $scope.gridApi = gridApi;
                gridApi.selection.on.rowSelectionChanged($scope, callbackFunction);
                gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction);
            }
 }

 function callbackFunction(row) { 
    var msg = 'row selected ' + row.isSelected; $log.log(msg); 
 })

我认为你应该看看 ui-grid 中的教程页面：http://ui-grid.info/docs/#/tutorial/210_selection。在我看来，API 页面很烂:(。

【讨论】：

我应该将哪些参数传递给回调函数？
gridApi.selection.on.rowSelectionChanged($scope,function(row){ var msg = 'row selected ' + row.isSelected; $log.log(msg); });
API 页面真的很烂，但这里是 URL：ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi#events

【解决方案2】：

您可以先获取当前grid中选中的所有记录：

$scope.rowsSelected = $scope.gridApi.selection.getSelectedRows();

现在我们可以使用 :

获得这个数组的长度

$scope.countRows = $scope.rowsSelected.length;

基于$scope.countRows>0 或0，您可以使用启用或禁用按钮

ng-disabled = "countRows"

【讨论】：

谢谢@shivisuper 很高兴它有用！

【解决方案3】：

   $scope.countRows=0;

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

       $scope.gridApi = gridApi;

       gridApi.selection.on.rowSelectionChanged($scope, function(row){ 
        $scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
        });

       gridApi.selection.on.rowSelectionChangedBatch($scope, function(row){ 
        $scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
        });
    };

在 HTML 方面你可以使用类似这样的东西

    <button class="custom-button" ng-disabled="countRows<=0" ng-click="submit()">Details</button>

【讨论】：