標籤：屬性 efault size styles 手風琴 utf-8 back src round
原文地址：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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
