Collapse折叠控件使用uib-collapse指令

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo',['ui.bootstrap']).controller('CollapseDemoCtrl', function ($scope) {

             $scope.isCollapsed = true;

             $scope.coled = function () {

                 console.log("collapsed");

             }

             $scope.coling = function () {

                 console.log("collapsing");

             }

             $scope.exped = function () {

                 console.log("expanded");

             }

             $scope.exping = function () {

                 console.log("expanding");

             }

         });

     </script>

 </head>

 <body>

     <div ng-controller="CollapseDemoCtrl">

         <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>

         <div uib-collapse="isCollapsed" collapsed="coled()" collapsing="coling()" expanded="exped()" expanding="exping()">

             <div class="well well-lg">Some content</div>

         </div>

     </div>

 </body>

 </html>

折叠控件可以使用的属性有：

(1)         uib-collapse. 默认为false.表示是否收起控件

(2)         collapsed.组件收起之后调用的函数.

(3)         collapsing.组件收起前调用的函数.如果返回一个拒绝的promise,收起动作将被取消

(4)         expanded.组件展开之后调用的函数.

(5)         expanding.组件展开前调用的函数.如果返回一个拒绝的promise,展开动作将被取消

在AngularJS中使用Promise，要使用AngularJS的内置服务$q。下面这个例子返回了一个拒绝的promise：

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('CollapseDemoCtrl', function ($scope, $q) {

             $scope.isCollapsed = false;

             $scope.coled = function () {

                 console.log("collapsed");

             }

             $scope.coling = function () {

                 console.log("collapsing");

                 var deferred = $q.defer();

                 var promise = deferred.promise;

                 promise.then(function (result) {

                     alert("Success: " + result);

                 }, function (error) {

                     alert("Fail: " + error);

                 });

                 deferred.reject("Can't Collapse");

                 return promise;

             }

             $scope.exped = function () {

                 console.log("expanded");

             }

             $scope.exping = function () {

                 console.log("expanding");

             }

         });

     </script>

折叠控件是手风琴控件所依赖的组件，下一篇随笔分享手风琴控件。

目录：

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

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse的更多相关文章

  1. Android常见UI组件之ListView（二）——定制ListView

    Android常见UI组件之ListView(二)--定制ListView 这一篇接上篇.展示ListView中选择多个项及实现筛选功能~ 1.在位于res/values目录下的strings.xml ...

  2. Android用户界面 UI组件--TextView及其子类(二) Button,selector选择器,sharp属性

    1.XML文件中的OnClick 属性可以指定在Activity中处理点击事件的方法,Activity中必须定义该属性指定的值作为方法的名字且有一个View类型的参数,表示此物件被点击. 2.使用se ...

  3. Android用户界面 UI组件--AdapterView及其子类(二) AdapterViewAnimator及其子类

    AdapterViewAnimator:当在视图间切换时会显示动画. android:animateFirstView 定义ViewAnimation首次显示时是否对当前视图应用动画. android ...

  4. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  5. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  6. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  7. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  8. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  9. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

随机推荐

  1. Egret官方案例学习笔记

    1.资源记载方式 (1)Egret引擎是2.0.5. (2)resource/resource.json文件是: { "resources": [ { "name&quo ...

  2. 遍历对象所有属性（json对象）

    var response = { "status": 1, "message": "\u6210\u529f", "data&qu ...

  3. 20160620001 FileUpload控件获取上传文件的路径

    参考地址: http://bbs.csdn.net/topics/350051517 —————————————————————————————— 用js实现 <%@ Page Language ...

  4. zigbee学习之路(八):定时器1(中断)

    一.前言 通过上次的实验,我们已经学会了定时器3的中断方式,这次,我们来看看定时器1通过中断怎么控制. 二.原理分析 定时器1的初始化跟前面提到的一样,也是要配置寄存器T1CTL,还要进行开中断的操作 ...

  5. Java堆和栈详解

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  6. mysql删除带有NULL的行

    假如表A有一列,名字为“Age”,有些行对应的Age为NULL,如果要删除这些行,使用一下语句: delete from A where Age is null;

  7. ipad开发:二维码扫描，摄像头旋转角度问题解决办法

    之前一直是在手机上开发,用系统原生二维码扫描功能,一点问题都没有,但是在ipad上,用户是横屏操作的,虽然界面旋转了,是横屏的,但是摄像头里显示的依然是竖屏效果,也就是说从摄像头里看到的和人眼看到的内 ...

  8. SELinux深入理解

    ps:今天在远程给服务器配置https的时候,一直乱码,以前做系统的系统第一件事情,就是关闭selinx,今天忘记了,然后就悲剧了... 弄了半天才弄好,镇定思痛,好好的来看下selinux 1. 简 ...

  9. 【Spring】Junit加载Spring容器作单元测试

    如果我们需要对我们的Service方法作单元测试,恰好又是用Spring作为IOC容器的,我们可以这么配置Junit加载Spring容器,方便做单元测试. > 基本的搭建 (1)引入所需的包 & ...

  10. JavaIO总结

    Java IO流分为字节流和字符流 下面首先介绍一下字节流 /** * 字节流测试 * @author hc * */ public class Test { public static void m ...