二、折叠控件Collapse
2017-03-31 本文已影响144人
幸福幸福幸福
便于测试，直接引入的cdn资源，可以直接拿走测试
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script>
angular.module('myApp',['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>
标签中属性所代表的含义：
- uib-collapse:默认false，表示控件的展开状态
- collapsed:组件收起之后的回调函数
- collapsing:组件收起之前调用的函数
- expanded:组件展开后的回调函数
- expanding:组件展开之前执行的函数，如果返回...
