Angular событие ui-grid: выбранная строка

Я пытаюсь включить/отключить кнопку, основанную на выборе строки на 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?

Ответы

Ответ 1

В ui-grid вы регистрируете функцию обратного вызова в событии "rowSelectionChanged"

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

Я думаю, вам стоит взглянуть на страницу учебника в ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection. Страница API отстой, на мой взгляд: (.

Ответ 2

вы можете сначала получить все записи, выбранные в grid в настоящее время, выполнив:

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

теперь мы можем получить длину этого массива, используя:

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

на основе $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;
        });
    };

На стороне HTML вы можете использовать что-то вроде этого

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