角度ui-grid事件：选择行

I am trying to enable/disable a button based on the selection of a row on a ui-grid. If there are no rows selected, the button is disabled.

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

I found this plunkr with the old ng-grid way of firing an event after a row is selected.

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

  $scope.gridOptions = { 

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

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

Unfortunately it does not work, and I have found no sign of such event in the ui-grid documentation.

不幸的是它不起作用，我在ui-grid文档中没有发现这种事件的迹象。

How can I achieve that with ui-grid?

我如何用ui-grid实现这一目标？

3 个解决方案

#1

In ui-grid, you register a callback function on the event "rowSelectionChanged"

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

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

I think you should take a look at the tutorial page in ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection. The API page sucks, in my opinion :(.

我想你应该看一下ui-grid的教程页面：http：//ui-grid.info/docs/#/tutorial/210_selection。在我看来，API页面很糟糕:(。

#2

you can first get all the records selected in the grid currently by doing :

你可以通过以下方式首先获得在网格中选择的所有记录：

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

now we can get the length of this array using :

现在我们可以使用以下方法获取此数组的长度：

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

based on $scope.countRows>0 or 0 you can enable or disable a button using

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

ng-disabled = "countRows"

#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;
        });
    };

In the HTML side you can use some thing like this

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

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

#1