<code>
<!DOCTYPE html>
<html lang="zh" ng-app>
<head>
<meta charset="UTF-8"/>
<title>我的个人笔记</title>
<link rel="stylesheet" href="./style/csslib/bootstrap.css" />
<script type="text/javascript" src="./script/jslib/angular.js"></script>
<script type="text/javascript" src="./script/jslib/jquery.js"></script>
<script type="text/javascript" src="./script/jslib/bootstrap.js"></script>
<script type="text/javascript" src="./script/js/controller.js"></script>
<style type="text/css">
.body-left{
background-color: #ddd;
min-height: 500px;
}
.body-right{
min-height: 500px;
margin: 0px;
padding: 0px;
}
iframe{
100%;
scrolling:auto;
frameborder:0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.body-left').height($(window).height());
$('.body-right').height($('.body-left').height());
$('.right-content').height($(window).height()-5 + "px");
});
function qiehuan(name){
document.myiframe.location= name;
}
</script>
</head>
<body>
<div class="col-md-3 body-left" ng-controller="MenuListCtrl">
<div class="panel-group menu" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" ng-repeat="menu in menus">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#{{menu.name}}" aria-expanded="true" aria-controls="collapseOne">
<h4 class="panel-title">
{{menu.name}}
</h4>
</a>
</div>
<div id="{{menu.name}}" class="panel-collapse collapse" role="tabpanel">
<div class="list-group" style="margin-bottom: 0px;" onclick="qiehuan('./view/angularjs.html')">
<a href="#" class="list-group-item">{{menu.biji}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 body-right">
<iframe name="myiframe" src="" class="right-content" frameborder="0" scrolling="auto"></iframe>
</div>
</body>
</html>
</code>