首页 > 代码库 > AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

2024-09-16 17:35:11   253人阅读

原文地址：http://www.cnblogs.com/pilixiami/p/5597837.html

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分享（二）——Collapse


联系
我们