Utilisation d'un menu déroulant ng-option dans un editableCellTemplate d'une grille ui [ng-grid 3.x]
J'utilise la nouvelle version 3.0 de ng-gridui-gridpour créer une grille dans mon application. Ce que j'essaie de faire, c'est de transformer l'une des cellules modifiables de mon tableau en une liste déroulante ng-options qui est remplie de données extraites avec une fabrique angulaire.
J'essaie de le faire en utilisant la fonctionnalité editableCellTemplate de la grille ui.
Voici un exemple de code:
HTML:
<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
Manette:
$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>
Voici un plunker avec le code. [ Note: ceci n'est qu'un exemple de code. Le tableau pour ng-options est extrait de la fabrique angulaire dans le code réel et n'est pas déclaré dans la portée. editDropdownOptionsArray ne fonctionnera probablement pas car les données sont dynamiques.]
Est-il possible de faire cela avec ui-grid? Je pensais que c'était peut-être une question de portée, car si je mettais le code de l'option ng dans ma page HTML, cela fonctionnerait comme prévu, mais ce que je peux comprendre de la documentation de ui-grid, c'est que le fichier temp.html devrait être dans la portée. . Je sais que cette version est toujours en version instable, mais toute aide à ce sujet serait la bienvenue!
UPDATE 31/03/2015:
Salut les gars, juste un mot si vous essayez cette solution et que cela ne fonctionne pas. En janvier, le code des portées externes a été remanié de getExternalScopes() à grid.addScope.source. https://github.com/angular-ui/ng-grid/issues/1379
Voici la version mise à jour avec le nouveau code: Click Me!
Vous devez utiliser la fonctionnalité external-scopes dans la version 3.x de ui-grid. La raison pour laquelle vous ne pouvez obtenir aucune option dans la liste déroulante de sélection est parce que ui-grid utilise désormais une portée isolée et que cela ne vous permettra pas d'accéder directement aux variables de portée d'application lorsque vous vous trouvez dans une cellule.
J'ai pu faire fonctionner votre plunkr avec les étapes ci-dessous - voir mis à jour plunkr
Étapes:
1) Dans index.html, spécifiez l’attribut external-scopes dans la division div, c.-à-d., Modifiez
<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, attribuez la portée à notre propriété external-scope, c'est-à-dire ajoutez cette ligne:
$scope.myExternalScope = $scope;
3) Dans temp.html, accédez au tableau genderTypes à l’aide de getExternalScopes () i.e. Modify editableCellTemplate value from
<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">
Pensées supplémentaires:
1) Je n'ai pas trouvé le ui-grid/dropdownEditor adapté à mes besoins - je ne l'ai donc pas encore essayé.
2) Vous pouvez ajouter cellTemplate également avec editableCellTemplate . Vous pouvez attribuer la même valeur aux deux.
Références:
Je ne suis pas sûr que cela puisse vous aider, car je commence tout juste à jouer avec la nouvelle grille ng.
Il semble que beaucoup d'options ont changé. D'après ce que j'ai appris, je peux vous dire qu'il n'est plus nécessaire d'utiliser un modèle de cellule si vous souhaitez une liste déroulante. C'est déjà intégré.
Activez-le 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 sûr que cette approche me plaise, mais le temps et l’utilisation nous le diront….
Oh, et je n'ai pas trouvé comment détecter les changements. Toujours à la recherche de la documentation (moche) pour un événement ou si je dois regarder les données de la grille pour les changements.
Dis-moi si tu as trouvé quelque chose à ce sujet.
Jusqu'à présent, amusez-vous avec ceci Plunker
Mise à jour:
J'ai découvert comment réagir à un changement. Ajouter/changer ces lignes:
onRegisterApi: function(gridApi) {
grid = gridApi.grid;
gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef) {
alert(rowEntity.name + ' ' + rowEntity.gender);
});
}
Une alerte apparaît lorsque vous quittez le mode édition. par exemple, cliquez en dehors de la cellule.
J'espère que cela t'aides.
Vous pouvez en fait utiliser editDropdownOptionsArray. Il est parfaitement possible de l'éditer 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'
}
]
}
J'ai simplement corrigé le chemin du fichier et cette erreur a disparu. Remarqué que, quand j'avais un chemin de fichier incorrect (le fichier n'existait pas là), je voyais alors cette erreur.