Collapse折叠控件使用uib-collapse指令
1 DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title>title>
7
8 <script src="/Scripts/angular.js">script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js">script>
10 <script>
11
12 angular.module('ui.bootstrap.demo',['ui.bootstrap']).controller('CollapseDemoCtrl', function ($scope) {
13 $scope.isCollapsed = true;
14
15 $scope.coled = function () {
16 console.log("collapsed");
17 }
18 $scope.coling = function () {
19 console.log("collapsing");
20 }
21 $scope.exped = function () {
22 console.log("expanded");
23 }
24 $scope.exping = function () {
25 console.log("expanding");
26 }
27 });
28
29 script>
30
31 head>
32 <body>
33 <div ng-controller="CollapseDemoCtrl">
34 <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapsebutton>
35 <div uib-collapse="isCollapsed" collapsed="coled()" collapsing="coling()" expanded="exped()" expanding="exping()">
36 <div class="well well-lg">Some contentdiv>
37 div>
38 div>
39 body>
40 html>
折叠控件可以使用的属性有：
(1) uib-collapse. 默认为false.表示是否收起控件
(2) collapsed.组件收起之后调用的函数.
(3) collapsing.组件收起前调用的函数.如果返回一个拒绝的promise,收起动作将被取消
(4) expanded.组件展开之后调用的函数.
(5) expanding.组件展开前调用的函数.如果返回一个拒绝的promise,展开动作将被取消
在AngularJS中使用Promise，要使用AngularJS的内置服务$q。下面这个例子返回了一个拒绝的promise：
1
折叠控件是手风琴控件所依赖的组件，下一篇随笔分享手风琴控件。
目录：
AngularJs的UI组件ui-Bootstrap分享（一）
AngularJs的UI组件ui-Bootstrap分享（二）——Collapse
AngularJs的UI组件ui-Bootstrap分享（三）——Accordion
AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup
AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination
AngularJs的UI组件ui-Bootstrap分享（六）——Tabs
AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown
AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover
AngularJs的UI组件ui-Bootstrap分享（九）——Alert
AngularJs的UI组件ui-Bootstrap分享（十）——Model
AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead
AngularJs的UI组件ui-Bootstrap分享（十二）——Rating
AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar
AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel