角度ui-grid事件：選擇行

Question

我正在嘗試根據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 文檔中沒有發現這種事件的跡象。

我如何用ui-grid實現這一目標？

Answer 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頁面很糟糕:(。

Answer 2

你可以通過以下方式首先獲得在grid選擇的所有記錄：

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

現在我們可以使用以下方法獲取此數組的長度：

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

基於$scope.countRows>0或0您可以使用啟用或禁用按鈕

ng-disabled = "countRows"

Answer 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>