Bạn có biết liệu có ai đó đã chuyển kịch bản của Bootstrap sang AngularJS không?Trình đơn thả xuống của nút AngularJS và Bootstrap thả xuống
Tôi cần Bootstrap's split button dropdown cho ứng dụng của tôi và tôi thực sự muốn tránh việc kéo jQuery vào. Có vẻ như Google không thực hiện điều này.
Nhìn vào bản demo này: http://jsfiddle.net/guillaumebiton/8muRC/
Chỉ có sức mạnh của Angular:
<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>
Nó chỉ sử dụng một biến 'mở' đó là đúng hay sai.
Là một phần của angular-ui, chúng tôi đang nghiên cứu tạo các widget của bootstrap trong AngularJS thuần túy (không phụ thuộc vào libs của bên thứ 3, chỉ phụ thuộc vào CSS của bootstrap).
Các kho nằm ở đây: https://github.com/angular-ui/bootstrap
này là rất nhiều công việc đang tiến nhưng có chỉ thị thả xuống-Toggle đã: https://github.com/angular-ui/bootstrap/blob/master/src/dropdownToggle/dropdownToggle.js
Bạn có thể sử dụng nó như thế này:
<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>
Xin lưu ý rằng chỉ thị này hoạt động ở cấp lớp nên đủ để thêm lớp dropdown-toggle để hoạt động này hoạt động!
Một lần nữa, đây là công việc đang diễn ra (toàn bộ nỗ lực bắt đầu từ 2-3 tuần trước) vì vậy báo cáo lỗi/yêu cầu kéo rất được hoan nghênh!
Ví dụ về chỉ thị này trong hành động: http://jsfiddle.net/eX4aH/13/ –
Điều này dường như bị hỏng? đã làm một chút nghiên cứu, thử các phiên bản khác nhau và vv nhưng không có kết quả, trạng thái của thành phần này là gì? – Joakim
@ pkozlowski.opensource Rằng Fiddle không còn hoạt động nữa ... – ken
Bạn có thể thử sử dụng chỉ thị này mà chuyển đổi angularjs chọn hộp vào danh sách thả xuống của bootstrap: http://jsfiddle.net/M32pj/28/ 'mẫu:
<select ng-model="example1" bs-selectbox>
<option value="1">One</option>
<option value="2">Two</option>
</select>
'
Thật dễ dàng! o_O Tôi phải đã thực sự mệt mỏi;) Cảm ơn! – minder
Đúng, điều này thực sự cho thấy sức mạnh của giao diện người dùng AngularJS khai báo. Nhưng trong trường hợp cụ thể này, có hơi nhiều hơn khi phiên bản Boostrap ban đầu đóng cửa sổ thả xuống khi chúng tôi cũng nhấp vào bên ngoài trình đơn thả xuống. Nó vẫn có thể được thực hiện trong AngularJS thuần túy nhưng một chỉ thị nhỏ bắt đầu có ý nghĩa ở đây. –
Giải pháp tuyệt vời! :) Mặc dù vậy, @ pkozlowski.opensource đúng về thực tế là nó không tự đóng khi nhấp vào bên ngoài. – Sikian