È possibile avere un menu a discesa di selezione all'interno di AngularJS ng-grid?

Question

Ho codificato il seguente:

$scope.gridOptions = { 
    data: 'myData', 
    enableCellEdit: true, 
    multiSelect: false, 
    columnDefs: [ 
     { field: 'Id', displayName: 'Id' }, 
     { field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }, 
     { field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate } 
    ] 
}; 

Il myData contiene in realtà quattro colonne Id, nome, stato e descrizione. Dove lo stato è un semplice array javascript con tre tipi di stato chiamato myStatus.

È possibile per me collegare in qualche modo i dati da myStatus a un campo nella griglia ng in modo da poter quindi selezionare un nuovo valore da una selezione a discesa?

Answer 1

Ecco l'output di qualche esperimento.

http://plnkr.co/edit/W1TkRgsp0klhqquxaiyc?p=preview

Sembra che si può mettere in select modello cellulare. E puoi utilizzare l'oggetto row per recuperare qualsiasi cosa sia la di cui hai bisogno. Ho usato row.rowIndex per accedere alle proprietà ai dati originali.

modello di esempio:

<div> 
    <select ng-model="myData[ row.rowIndex ].myStatus"> 
    <option ng-repeat="st in statuses">{{st}}</option> 
    </select> 
</div> 

(. Sarebbe prelevate se siamo in grado di scrivere i dati ogirinal attraverso row oggetto non so come fare.)

Answer 2

Lo shimayama modo Tosh stanno facendo, non consentirà di ordinare la tabella in un ordine diverso dall'array del modello.

Questo è un brutto modo per farlo, ma ho dato una rapida occhiata nel codice sorgente di ng-grid e ho scoperto che usano regexp per inserire il modello-ng. Quindi, usando la stessa variabile, COL_FIELD, nel tuo codice puoi fare in modo che ng-grid inserisca il modello corretto.

<div> 
    <select ng-model="COL_FIELD"> 
    <option ng-repeat="status in statuses">{{status}}</option> 
    </select> 
</div> 

Ecco un plunker con un esempio di lavoro: http://plnkr.co/edit/Yj2qmI?p=preview

Answer 3

Una più completa/modo più ordinato di fare questo in ng-grid 2.x ho incluso in un plunker qui: http://plnkr.co/edit/VABAEu?p=preview, sfruttando contenuti da un'altra domanda simile su StackOverflow qui: AngularJS and ng-grid - auto save data to the server after a cell was changed

In sintesi, il mio formato per il modello di campo modificabile si presenta in questo modo:

 $scope.statuses = {1: 'active', 2: 'inactive'}; 
     $scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" 
     ng-input="COL_FIELD" ng-model="COL_FIELD" 
     ng-options="id as name for (id, name) in statuses" 
     ng-blur="updateEntity(row)" />'; 

ho fornito un post sul blog che ha una guida più approfondita del codice di end-to-end: http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-dropdowns-and-selects/

Ng-grid (ui-grid) 3.0 è vicino ad essere rilasciato, e offre diversi modi per fare griglie modificabili. Ho un post su questo qui: http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

Answer 4

Non posso prendermi il merito per l'intera soluzione. Ho appena messo insieme i pezzi. Il mio obiettivo era preservare l'associazione a tre vie.

modello dovrebbe essere simile a questo:

 $scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-options="value.id as value.label for value in OptionsList}" />';

COL_FIELD ovviamente essenziale per mantenere il riferimento per correggere delle cellule.

È possibile catturare il cambiamento in modo nativo:

$scope.$on('ngGridEventEndCellEdit', function (evt) { 
 
      console.log(evt.targetScope.row.entity); 
 
      WaitListArray.$save(evt.targetScope.row.entity) 
 
       .then(function (ref) { 
 
        console.log('saved'); 
 
       }); 
 
     });

In questo caso è la mia WaitListArray Array Firebase/AngularFire per la tavola. Usando questo metodo, sono stato in grado di preservare il mio legame ad albero.

campo (NG-opzioni):

ho aggiunto filtro per sostituire id con etichetta per i miei valori a discesa.

.filter('mapStatus', function() { 
 
    return function(input, OptionsList) { 
 
    var _out = 'unknown'; 
 
    angular.forEach(OptionsList, function(value, key) { 
 

 
     if (value && value.id == input) { 
 
     _out = value.label; 
 
     } 
 
    }); 
 
    return _out; 
 

 
    }; 
 
})

In precedenza, OptionsList è miei valori discesa matrice esempio: {id: 1, label: "etichetta1"}

ho trovato molto questa soluzione riutilizzabile. Si spera, si risparmia tempo per qualcuno.