web-dev-qa-db-fra.com

angular événement ui-grid: ligne sélectionnée

J'essaie d'activer/désactiver un bouton basé sur la sélection d'une ligne sur une interface utilisateur. Si aucune ligne n'est sélectionnée, le bouton est désactivé.

J'ai trouvé cela plunkr avec l'ancienne façon ng-grid de déclencher un événement après la sélection d'une ligne.

  $scope.gridOptions = { 

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

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

Malheureusement, cela ne fonctionne pas, et je n'ai trouvé aucun signe d'un tel événement dans la ui-grid documentation .

Comment puis-je y parvenir avec ui-grid?

javascriptangularjsangular-ui-grid
16
Pablo

Dans ui-grid, vous enregistrez une fonction de rappel sur l'événement "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); 
 })

Je pense que vous devriez jeter un œil à la page du tutoriel dans ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection . La page API craint, à mon avis :(.

42
Huy Hoang Pham

vous pouvez d'abord obtenir tous les enregistrements sélectionnés dans le grid actuellement en faisant:

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

maintenant nous pouvons obtenir la longueur de ce tableau en utilisant:

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

basé sur $scope.countRows>0 ou 0 vous pouvez activer ou désactiver un bouton en utilisant

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

Dans le côté HTML, vous pouvez utiliser quelque chose comme ça

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