Home > Developer > Web Develop
Original Address: http://www.cnblogs.com/pilixiami/p/5597837.html
Collapse folding controls using uib-collapse directives
<!DOCTYPE HTML> <HTMLNg-app= "ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml"> <Head> <Metahttp-equiv= "content-type"content= "text/html; charset=utf-8" /> <Linkhref= "/content/bootstrap.css"rel= "stylesheet" /> <title></title> <Scriptsrc= "/scripts/angular.js"></Script> <Scriptsrc= "/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> <DivNg-controller= "collapsedemoctrl"> <Buttontype= "button"class= "btn btn-default"Ng-click= "isCollapsed =!iscollapsed">Toggle collapse</Button> <DivUib-collapse= "isCollapsed"collapsed= "coled ()"collapsing= "coling ()"expanded= "exped ()"Expanding= "exping ()"> <Divclass= "well well-lg">Some Content</Div> </Div> </Div> </Body> </HTML>
The properties that a collapsed control can use Are:
(1) Uib-collapse. The default is FALSE. indicates whether the control is closed
(2) Collapsed. The function that is called after the component is Closed.
(3) Collapsing. the function called before the component is closed. if a rejected promise is returned, the close action is canceled
(4) Expanded. The function that is called after the component is Expanded.
(5) Expanding. the function called before the component is Expanded. if you return a rejected promise, the expand action is canceled
Use promise in Angularjs to use Angularjs's built-in service $q. The following example returns a rejected 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"); varDeferred =$q. Defer (); varPromise =deferred.promise; Promise.then (function(result) {alert ("Success:" +result); }, function(error) {alert ("Fail:" +error); }); Deferred.reject ("Can ' t Collapse"); returnpromise; } $scope. exped=function() {console.log ("expanded"); } $scope. exping=function() {console.log ("expanding"); } });</script>
The collapsed control is the component on which the accordion control relies, and the next essay shares the accordion Control.
Angularjs UI Components Ui-bootstrap share (ii)--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
