Wissen Sie, ob jemand Bootstrap-Skripte nach AngularJS portiert hat?AngularJS und Bootstrap's geteiltes Dropdown-Menü
Ich brauche Bootstrap split button dropdown für meine App und ich würde wirklich gerne vermeiden jQuery ziehen. Ich scheine nicht zu googlen dies aus.
Schauen Sie sich das Demo: http://jsfiddle.net/guillaumebiton/8muRC/
Nur die Macht der Winkel:
<div class="btn-group" ng-class='{open: open}'>
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" ng-click='open=!open'>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Es verwendet nur eine Variable 'open', die wahr oder falsch ist.
Als Teil des Angular-Ui arbeiten wir daran, Bootstrap-Widgets in reinem AngularJS zu erstellen (keine Abhängigkeiten von JS-Bibliotheken von Drittanbietern, wobei nur die Abhängigkeit vom CSS des Bootstrap abhängt).
Das Repository befindet sich hier: https://github.com/angular-ui/bootstrap
Das ist sehr viel Arbeit im Gange, aber es ist die Dropdown-Toggle-Richtlinie bereits: https://github.com/angular-ui/bootstrap/blob/master/src/dropdownToggle/dropdownToggle.js
Sie es wie folgt verwenden:
<div ng-controller="MyCtrl">
<div class="btn-group">
<a class="btn dropdown-toggle">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a>Action 1</a></li>
<li><a>Action 2</a></li>
</ul>
</div>
</div>
Bitte beachten Sie, dass diese Direktive auf Klassenebene funktioniert, so dass es ausreicht, die Klasse dropdown-toggle hinzuzufügen, damit sie funktioniert!
Noch einmal, dies ist Arbeit in Arbeit (der ganze Aufwand begann vor etwa 2-3 Wochen), so dass Fehlerberichte/Pull-Anfragen sehr willkommen sind!
Beispiel dieser Richtlinie in Aktion: http://jsfiddle.net/eX4aH/13/ –
Das scheint kaputt zu sein? Ich habe ein bisschen geforscht, verschiedene Versionen getestet und so weiter, aber ohne Erfolg. Wie ist der Status dieser Komponente? – Joakim
@ pkozlowski.opensource Diese Fiddle scheint nicht mehr zu funktionieren ... – ken
Sie können versuchen, diese Anweisung verwenden, die AngularJS Auswahlbox in den Bootstrap des Drop-down-konvertiert: http://jsfiddle.net/M32pj/28/ `Beispiel:
<select ng-model="example1" bs-selectbox>
<option value="1">One</option>
<option value="2">Two</option>
</select>
`
So einfach! o_O Ich muss wirklich müde gewesen sein;) Danke! – minder
Ja, das zeigt wirklich die Macht der deklarativen AngularJS UIs. Aber in diesem speziellen Fall gibt es etwas mehr, da die ursprüngliche Boostrap-Version die Dropdown-Liste schließt, wenn wir auch außerhalb des Dropdown-Menüs klicken. Es könnte immer noch in reinem AngularJS gemacht werden, aber eine kleine Direktive macht hier Sinn. –
Schöne Lösung! :) Eventhough, @ pkozlowski.opensource ist richtig über die Tatsache, dass es sich nicht schließt, wenn Sie außerhalb klicken. – Sikian