Czy wiesz, czy ktoś przeskalował skrypty Bootstrapa do AngularJS?Rozdzielany przycisk podziału AngularJS i Bootstrapa
Do mojej aplikacji potrzebuję Bootstrapa o numerze split button dropdown. Naprawdę chciałbym uniknąć ciągnięcia jQuery. Wydaje mi się, że tego nie robiłem.
Spójrz na to demo: http://jsfiddle.net/guillaumebiton/8muRC/
Tylko moc kątowa:
<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>
on korzystać tylko jedna zmienna 'otwarte', które jest prawdziwe, czy fałszywe.
W ramach angular-ui pracujemy nad tworzeniem widgetów bootstrap w czystym AngularJS (bez zależności od bibliotek JS stron trzecich, a jedyną zależnością jest CSS bootstrap).
Repozytorium znajduje się tutaj: https://github.com/angular-ui/bootstrap
Jest bardzo dużo pracy w toku, ale nie jest dyrektywa rozwijana-przełącznik już: https://github.com/angular-ui/bootstrap/blob/master/src/dropdownToggle/dropdownToggle.js
Można używać go tak:
<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>
Należy pamiętać, że ta dyrektywa działa na poziomie klasy, więc wystarczy dodać klasę dropdown-toggle, aby mogła działać!
Po raz kolejny jest to praca w toku (cały wysiłek rozpoczął się około 2-3 tygodnie temu), więc zgłoszenia błędów/prośby o odciąganie są bardzo mile widziane!
Można spróbować użyć tej dyrektywy, która konwertuje angularjs wybierz pole do bootstrap w rozwijanym: http://jsfiddle.net/M32pj/28/ `Sample:
<select ng-model="example1" bs-selectbox>
<option value="1">One</option>
<option value="2">Two</option>
</select>
`
Tak łatwo! o_O Musiałem być naprawdę zmęczony;) Dzięki! – minder
Tak, to naprawdę pokazuje moc deklaratywnych interfejsów AngularJS. Ale w tym konkretnym przypadku jest nieco więcej, ponieważ oryginalna wersja Boostrap'a zamyka się, gdy klikniemy również na zewnątrz listy rozwijanej. Wciąż można to zrobić w czystym AngularJS, ale mała dyrektywa zaczyna mieć sens. –
Ładne rozwiązanie! :) Eventhough, @ pkozlowski.opensource ma rację co do faktu, że nie zamyka się po kliknięciu na zewnątrz. – Sikian