Ich benutze die neue 3.0-Version von ng-grid ui-grid , um ein Raster in meinem zu erstellen Anwendung. Was ich versuche, ist, eine der editierbaren Zellen in meiner Tabelle zu einem ng-options Dropdown-Menü zu machen das ist gefüllt mit Daten, die mit einer eckigen Fabrik abgerufen werden.
Ich versuche dies zu tun, indem ich die Funktion editableCellTemplate des ui-grids verwende.
Hier ist ein Beispielcode:
HTML:
%Vor%Controller:
%Vor%temp.html:
%Vor%Hier ist ein Plotter mit dem Code. [ Hinweis: Dies ist nur Beispielcode. Array für ng-Optionen wird aus eckiger Fabrik in aktuellem Code eingezogen und nicht im Umfang deklariert. editDropdownOptionsArray wird wahrscheinlich nicht funktionieren, da Daten dynamisch sind.]
Ist es möglich, dies mit ui-grid zu tun? Ich dachte, es wäre vielleicht ein Problem des Umfangs, denn wenn ich den ng-Optionscode in meine HTML-Seite schreiben würde, funktionierte das wie erwartet, aber was ich aus der ui-grid-Dokumentation entnehme, ist, dass die temp.html-Datei im Bereich sein sollte . Ich weiß, dass dieses Zeug immer noch in instabiler Version ist, aber jede Hilfe in dieser Angelegenheit wäre willkommen!
UPDATE 3/31/2015:
Hallo Leute, nur eine Anmerkung, wenn ihr diese Lösung ausprobiert und es nicht funktioniert. Im Januar wurde der Code für externe Bereiche von getExternalScopes() auf grid.addScope.source umgestaltet. Ссылка
Hier ist der aktualisierte Plunkr mit dem neuen Code: Klick mich!
Sie müssten die Funktion external-scopes in der 3.x-Version von ui-grid verwenden. Der Grund dafür, dass Sie keine Optionen in der Dropdown-Liste auswählen können, liegt darin, dass ui-grid jetzt einen isolierten Bereich verwendet und Sie nicht direkt auf die Anwendungsbereichsvariablen zugreifen können, wenn Sie sich in einer Zelle befinden.
Ich konnte Ihre Plunkr mit den folgenden Schritten arbeiten - siehe aktualisierte Plunkr
Schritte:
1) Geben Sie in index.html das Attribut external scopes im Grid div an, d. h. ändern Sie
%Vor%zu
%Vor%2) Weisen Sie in app.js den Gültigkeitsbereich unserer external-scope-Eigenschaft zu, d. h. fügen Sie diese Zeile hinzu:
%Vor%3) Greifen Sie in temp.html auf das Array genderTypes zu, indem Sie getExternalScopes () verwenden, d. h. ändern Sie den Wert editableCellTemplate von
%Vor%zu
%Vor%Zusätzliche Gedanken:
1) Ich habe den ui-grid / dropdownEditor nicht für meine Bedürfnisse gefunden - daher habe ich das noch nicht getestet.
2) Sie können cellTemplate auch zusammen mit editableCellTemplate hinzufügen. Sie können beide den gleichen Wert zuweisen.
Referenzen:
Ich bin mir nicht sicher, ob dir das weiterhelfen kann, weil ich gerade erst mit dem neuen ng-Grid herumspiele.
Es scheint, als hätten sich viele Optionen geändert. Nach dem, was ich gelernt habe, kann ich Ihnen sagen, dass es keine Notwendigkeit mehr für ein cellTemplate gibt, wenn Sie ein Dropdown haben möchten. Es ist bereits eingebaut.
Aktivieren Sie es wie folgt:
%Vor%Ich bin nicht sicher, ob mir dieser Ansatz gefällt, aber die Zeit und die Nutzung werden es zeigen ...
Oh, und ich habe nicht herausgefunden, wie man Veränderungen erkennt. Ich suche immer noch die (lausige) Dokumentation für ein Ereignis oder wenn ich Grid-Daten auf Änderungen beobachten muss.
Sag mir, ob du etwas dazu gefunden hast.
Bis jetzt viel Spaß mit diesem Plunker
Aktualisierung:
Ich habe herausgefunden, wie ich auf eine Veränderung reagieren kann. Hinzufügen / Ändern Sie diese Zeilen:
%Vor%Warnung wird angezeigt, wenn Sie den Bearbeitungsmodus verlassen. Beispiel: Klicken Sie außerhalb der Zelle.
Hoffe, das hilft.
Tags und Links javascript angularjs grid angular-ui-grid ng-grid