2016-04-14 8 views
1

Ich habe Angular Material in einem meiner Projekt verwendet. Plötzlich wurde mir klar, dass ich bei md-select alle auswählen muss. Ich denke, ich werde eine git Anfrage für das gleiche machen.Gibt es eine Version von Angular Material md-wählen Sie mit wählen Sie alle Option

Allerdings suche ich derzeit nach einer ähnlichen Dropdown-Struktur mit Checkboxen (wie md-select multiple), sondern auch eine Select-Option.

Ich bin mir bewusst, dass ich einen leeren Dummy-Eintrag in md-Option Array Option und manipulieren umgekehrter Weg auf seine Auswahl schieben kann. Aber es würde eine Menge Codeänderung in meiner gegenwärtigen Struktur erfordern und wäre auch nicht eine elegante Sache zu tun.

Ich habe versucht, es in Bootstrap und jQuery-UI gesucht, aber konnte man noch nicht finden. Gibt es eine solche Kontrolle bekannt? Jede Umleitung wird hilfreich sein.

+0

Ich denke, dass Sie stattdessen md-chips mit Autocomplete verwenden müssen. Ein Multi-Select sieht im Materialdesign nicht richtig gut aus, zudem wäre wahrscheinlich in Touchscreens schrecklich zu gebrauchen. –

+0

@Velasquez: Ich bezweifle, wenn Sie mich richtig verstanden haben. Ich suche nach etwas, das alle Werte aus Dropdown mit einem Klick oder einer Berührung auswählen kann. Zum Beispiel können wir in Google Mail auf ein oberes Kontrollkästchen klicken, das alle Mails auf dieser Seite auswählt. –

+0

Ok, ich habe dich. Vielleicht können Sie ein Alle vor dem

Antwort

2

Sie können das leicht innerhalb des HTML tun. Es benötigt nur eine Codezeile oder zwei Zeilen, wenn Sie auch eine Option "Keine auswählen" möchten. Zum Beispiel

Example in Plunker.

Edit: Ich die unten Plunker zeigen die Schaltfläche „Alle“ in der Auswahlbox neben dem „Benutzer“ optgroup Titel aktualisiert. Die relevante Änderung:

<md-select ng-model="selectedUser" multiple="" ng-model-options="{trackBy: '$value.id'}"> 
     <button ng-click="doSelectedUser()" style="float:right">all</button> 
     <md-optgroup label="Users"> 
+0

@ C14L hinzufügen: Natürlich kann dies getan werden; aber das ist nicht was ich suche .. Was ich will, ist die Schaltfläche, die Sie zur Verfügung gestellt haben (oder Kontrollkästchen), um im Dropdown-Menü zu sein (wahrscheinlich neben Ihrem Benutzer-Label). Eckiges Material baut den Drop-Down im laufenden Betrieb auf, daher kann ich es nicht erreichen –

+0

@SaurabhTiwari Ich habe den Plunker aktualisiert. Sie können den Button einfach über den optgroup-Titel "md-select" und "float: right" setzen. – C14L

+0

Ich habe einige Änderungen an Ihrem Plunker vorgenommen. hoffen, dass Sie sie sehen möchten: ' < md-Option ng-value = "user" ng-repeat = "Benutzer in Benutzer"> {{}} user.name ' –