Utilizzo di un menu a discesa ng-opzione in una griglia utente editableCellTemplate [ng-grid 3.x]

Question

Sto utilizzando la nuova versione 3.0 di ng-grid ui-grid per creare una griglia nella mia applicazione. Quello che sto cercando di fare è rendere una delle celle modificabili nella mia tabella un elenco a discesa ng-options riempito con dati recuperati con una fabbrica angolare.

Sto provando a farlo utilizzando la funzione editableCellTemplate della griglia utente.

Ecco qualche esempio di codice:

HTML:

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

Controller:

$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> 

Ecco un plunker con il codice . [Nota: questo è solo un esempio di codice. La matrice per ng-options viene estratta dalla fabbrica angolare nel codice effettivo e non dichiarata nell'ambito. editDropdownOptionsArray probabilmente non funzionerà perché i dati sono dinamici.]

E 'possibile farlo con ui-grid? Ho pensato che forse era un problema di scope, perché se avessi inserito il codice di opzione ng nella mia pagina HTML funzionava come previsto, ma quello che posso raccogliere dalla documentazione della griglia di rete è che il file temp.html dovrebbe essere nel campo di applicazione . So che questa roba è ancora in versione instabile, ma qualsiasi aiuto in merito sarebbe apprezzato!

---

UPDATE 2015/03/31:

Ciao ragazzi, solo una nota se il vostro provare questa soluzione e non funziona. A gennaio il codice per gli ambiti esterni è stato rifattorizzato da getExternalScopes() a grid.addScope.source. https://github.com/angular-ui/ng-grid/issues/1379

Ecco il plunkr aggiornato con il nuovo codice: Click Me!

Answer 1

È necessario utilizzare la funzione per gli ambiti esterni all'interno della versione 3.x di ui-grid. Il motivo per cui non si è in grado di ottenere alcuna opzione nel menu a discesa di selezione è perché la griglia ui ora utilizza un ambito isolato e questo non consente di accedere direttamente alle variabili dell'ambito dell'app quando si trova in una cella.

sono stato in grado di ottenere il vostro plunkr lavorare con procedura riportata di seguito - vedere updated plunkr

Passi:

1) All'interno index.html, specificare il esterni-ambiti attributo nella griglia div cioè modificare

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

a

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

2) Da app.js, assegnare lo scopo di nostra proprietà esterna-scope cioè aggiungere questa riga:

$scope.myExternalScope = $scope; 

3) Da temp.html, accedere alle genderTypes array utilizzando getExternalScopes() cioè modificare editableCellTemplate valore da

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType"> 

a

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes"> 

Pensieri Extra:

1) non ho trovato il ui-grid/dropdownEditor adatto per le mie esigenze - di conseguenza, non abbiamo provato questo fuori ancora .

2) È possibile aggiungere CellTemplate anche con editableCellTemplate. Puoi assegnare entrambi lo stesso valore.

Riferimenti:

1. http://ui-grid.info/docs/#/tutorial/305_externalScopes

Answer 2

Non sono sicuro se questo può aiutare, perché sto anche iniziando a giocare con il nuovo ng-grid.

Sembra che molte opzioni siano cambiate. Da quello che ho imparato, posso dirti che non c'è più bisogno di una cellaTemplate se vuoi avere un menu a discesa. E 'già costruito nel

Attivare in questo modo:.

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

    } 
]); 

io non sto zitto sicuro se mi piace questo approccio, ma il tempo e l'uso dirò ...

Oh, e ho non ho scoperto come rilevare i cambiamenti. Sto ancora cercando la (schifosa) documentazione per un evento o se devo guardare i dati della griglia per le modifiche.

Dimmi se hai trovato qualcosa a riguardo.

Finora divertirsi con questo Plunker

Aggiornamento:

ho scoperto come reagire a un cambiamento. Aggiungi/Modifica queste righe:

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

Alert si apre quando si esce dalla modalità di modifica. per esempio fai clic all'esterno della cella.

Spero che questo aiuti.

Answer 3

È possibile, infatti, utilizzare editDropdownOptionsArray. È perfettamente possibile modificarlo dopo l'inizializzazione!

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