angularjs de l'INTERFACE utilisateur de la grille d'attribuer les colonnes et les données de façon dynamique

Je suis en train d'ajouter des colonnes dynamiquement à la ui-grid et également de l'affectation de la données. Premier temps, la grille est bien. Mais, quand j'essaie de modifier les colonnes et les données de manière dynamique, il ne fonctionne pas comme prévu.

$scope.myfunc = function() {

alert("Rebinding the data");
$scope.gridOptions = {};

$scope.gridOptions.columnDefs.push({
 name: 'firstName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'lastName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'company'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'employed'
  });

  alert("added new columns");
  $scope.gridOptions.data = data1;

  $scope.gridApi.grid.refresh();
};

veuillez vérifier les plunkr

Quelqu'un peut se pencher sur ce problème et de me suggérer comment faire?

OriginalL'auteur NewBuddy | 2016-06-13

  1. 6

    je pense que vous pouvez supprimer le code: $scope.gridOptions = {};

    la dernière plunker

    la deuxième data1 doit être poussé dans le premier data

    J'ai changé le plunker avec le dernier code, pls vérifier!

     $scope.myfunc = function()
  {

    alert("Rebinding the data");
     $scope.gridOptions.columnDefs = new Array();

    $scope.gridOptions.columnDefs.push({
     field: 'firstName'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'lastName'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'company'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'employed'
      });

      alert("added new columns");
      $scope.gridOptions.data = data1;

     /* for(var i=0; i<$scope.gridOptions.data.length; i++){
        $scope.gridOptions.data[i].firstName = data1[i].firstName;
        $scope.gridOptions.data[i].lastName = data1[i].lastName;
        $scope.gridOptions.data[i].company = data1[i].company;
        $scope.gridOptions.data[i].employed = data1[i].employed;
      } */


      $scope.gridApi.grid.refresh();
  };

    si vous souhaitez supprimer les anciennes colonnes, vous pouvez utiliser

    $scope.gridOptions.columnDefs = new Array();

    et puis actualiser les données à l'aide de:

    $scope.gridOptions.data = data1;

$scope.gridApi.grid.refresh();
    merci pour la mise à jour. mais, je veux supprimer les anciennes colonnes et les données une fois que je clique sur relier bouton d'action. Pouvez-vous m'aider sur ce point s'il vous plaît?
    j'ai mis à jour le plunker et le code ci-dessus, vous pouvez utiliser $champ d'application.gridOptions.columnDefs = new Array(); et ensuite utiliser $champ d'application.gridOptions.données = data1;
    est-il vous aider à résoudre cette question?
    merci Vino; il a résolu mon problème de la ré-affectation de / re-liaison des colonnes dynamiquement.

    OriginalL'auteur Dang