À l'aide d'un ng-option de liste déroulante dans une interface utilisateur-réseau editableCellTemplate [ng-grille 3.x]

Je suis en utilisant ng-grille de la nouvelle version 3.0 l'interface utilisateur-réseau pour faire une grille dans mon application. Ce que j'essaie de faire, c'est de l'une des cellules modifiables dans ma table un ng-options liste déroulante qui est rempli avec des données récupérées avec une angulaire de l'usine.

Je suis en train de le faire en utilisant la editableCellTemplate fonctionnalité de l'interface utilisateur-réseau.

Voici un exemple de code:

HTML:

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

Contrôleur:

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};

temp.html:

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

Ici est un plunker avec le code. [Remarque: c'est juste un exemple de code. Tableau de ng-options est tiré à partir angulaire de l'usine dans le code et non déclarée dans la portée. editDropdownOptionsArray ne fonctionnera probablement pas, car les données sont dynamiques.]

Est-il possible de faire cela avec de l'interface utilisateur-réseau? J'ai pensé que c'était peut-être un problème de portée parce que si je mettais le ng-option code dans ma page HTML, il a fonctionné comme prévu, mais ce que je peux recueillir à partir de l'interface utilisateur de la grille de la documentation, c'est que l'temp.html le fichier doit être dans le champ d'application. Je sais que ce genre de choses est toujours dans unstable, mais toute aide sur le sujet serait appréciée!

Mise à JOUR 3/31/2015:

Salut les gars, juste une remarque si votre l'essai de cette solution et ça ne fonctionne pas. En janvier, le code externe étendues a été reconstruit à partir de getExternalScopes() à grid.addScope.source. https://github.com/angular-ui/ng-grid/issues/1379

Voici la mise à jour plunkr avec le nouveau code: Cliquez Sur Moi!

OriginalL'auteur juleekwin | 2014-10-07

6

Vous devez utiliser le externe-étendues disposent d'un délai de 3.x version de l'interface utilisateur-réseau. La raison pour laquelle vous n'êtes pas en mesure d'obtenir toutes les options dans l'sélectionnez le menu déroulant est parce que l'interface utilisateur-réseau utilise maintenant un cas isolé portée et elle ne vous permettra pas d'accéder directement application des variables lorsque dans une cellule.

J'ai été en mesure d'obtenir votre plunkr de travail avec les étapes ci-dessous - voir mise à jour plunkr

Suit:

1) Dans index.html, spécifiez le externe-étendues attribut dans la grille div c'est à dire modifier
```
<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
```
à
```
<div ui-grid="gridOptions" ui-grid-edit class="grid" external-scopes="myExternalScope"></div> 
```
2) Dans app.js, affecter l'étendue de notre externe, le champ d'application de la propriété-je.e ajouter cette ligne:
```
$scope.myExternalScope = $scope;
```
3) Dans temp.html, l'accès à la genderTypes tableau à l'aide de getExternalScopes() c'est à dire modifier editableCellTemplate valeur de
```
<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType">
```
à
```
<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes">
```
Supplémentaire Pensées:

1) je n'ai pas trouvé la de l'interface utilisateur-réseau/dropdownEditor adaptés à mes besoins, donc n'essayez pas encore sorti.

2) Vous pouvez ajouter cellTemplate aussi avec editableCellTemplate. Vous pouvez attribuer la même valeur.

Références:
1. http://ui-grid.info/docs/#/tutorial/305_externalScopes
OriginalL'auteur jnkee

Ne sais pas si cela peut vous aider, parce que je suis aussi juste de commencer à jouer avec le nouveau ng-grille.

Il semble que beaucoup d'options ont changé. De ce que j'ai appris que je peux vous dire qu'il n'est pas besoin de plus pour un cellTemplate si vous voulez avoir une liste déroulante. C'est déjà intégré.

L'activer comme ceci:

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {

    $scope.genderTypes = [{
      ID: 1,
      type: 'female'
    }, {
      ID: 2,
      type: 'female'
    }, {
      ID: 3,
      type: 'both'
    }, {
      ID: 4,
      type: 'none'
    }, ];


    $scope.gridOptions = {
      enableSorting: true,
      enableFiltering: true,
      enableCellEditOnFocus: true,
      columnDefs: [{
        field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      }, {
        field: 'gender',
        editType: 'dropdown',
        enableCellEdit: true,
        editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownOptionsArray: $scope.genderTypes,
        editDropdownIdLabel: 'type',
        editDropdownValueLabel: 'type'
      }, {
        field: 'company',
        enableSorting: false
      }],
      onRegisterApi: function(gridApi) {
        grid = gridApi.grid;
      }
    };

    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });

  }
]);

Je ne suis pas tranquille sûr si j'aime cette approche, mais le temps et l'usage nous le dira ...

Oh, et je n'ai pas trouvé comment détecter les changements. Toujours à la recherche de l' (moche) de la documentation pour un événement ou si je dois regarder la grille de données pour des changements.

Me dire si vous avez trouvé quelque chose à ce sujet.

La mesure amusez-vous avec ce Plunker

Mise à jour:

J'ai trouvé comment réagir à un changement. Ajouter/Modifier ces lignes:

  onRegisterApi: function(gridApi) {
    grid = gridApi.grid;
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef) {
      alert(rowEntity.name + ' ' + rowEntity.gender);
    });
  }

Message d'alerte apparaît lorsque vous quittez le mode d'édition. e.g Cliquez sur l'extérieur de la cellule.

Espère que cette aide.

C'est beaucoup plus simple de répondre que l'aide d'un cellEditTemplate pour les listes déroulantes. Aussi, si vous êtes dans rowEdit mode, votre événement à détecter les changements est gridApi.rowEdit.on.saveRow.
Salut. Je vois que vous avez codé en dur les valeurs de "type" et au format json. Maintenant, dans mon cas, j'obtiens une liste de chaînes à partir de la dB et maintenant, les valeurs ne s'affichent pas..que dois-je faire ??

OriginalL'auteur mainguy

Vous pouvez en fait utiliser editDropdownOptionsArray. Il est parfaitement possible de le modifier après l'initialisation!

$scope.someFunction = function(){
  $scope.coulmnDefs.columnDefs[1].editDropdownOptionsArray = [
    {
      title: 'Some changed option',
      value: 'opt1'
    },
    {
      title: 'Some other changed option',
      value: 'opt2'
    }
  ]
}

OriginalL'auteur Lukas Dörig

0

J'ai simplement corrigé chemin d'accès au fichier, et cette erreur a disparu. Remarqué que, quand j'ai mal chemin d'accès au fichier (fichier non existant), puis de voir cette erreur.

OriginalL'auteur Anshul

Vous devez vous connecter pour publier un commentaire.