web-dev-qa-db-ja.com

angular ui-grid event：row selected

UIグリッドの行の選択に基づいてボタンを有効/無効にしようとしています。行が選択されていない場合、ボタンは無効になります。

行が選択された後にイベントを発生させる古いng-gridの方法でこれを見つけました plunkr 。

  $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でこれを達成するにはどうすればよいですか？

javascriptangularjsangular-ui-grid
16
Pablo

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ページはひどいです:(。

42
Huy Hoang Pham

現在gridで選択されているすべてのレコードを最初に取得できます：

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

これで、この配列の長さを取得できます：

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

に基づく $scope.countRows>0または0を使用してボタンを有効または無効にすることができます

ng-disabled = "countRows"
3
Vishal Gulati
   $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>
2
Nikhil Kumar K