ksino's diary

覚えたことを忘れないように、小さなことでも書いていく。

UI Bootstrapで開閉パネルを実装する

angularjs javascript

index.html

<!doctype html>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-1.3.3.min.js"></script>
<script src="scripts/collapse.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div ng-controller="testctl">
		<input type="button" value="開閉パネル" ng-click="isCollapsed = !isCollapsed"></input>
		<div uib-collapse="isCollapsed">
			<p>こんにちは</p>
		</div>
	</div>
</body>
</html>

collapse.js

angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp').controller('testctl', function($scope) {
  $scope.isCollapsed = false;
});