어떻게 구현해야합니까?AngularJS 탭 내용
4 개의 탭은 onclick을 열고 뷰를 자식에게로드합니다.
4-ng-view 태그를 사용해 보았지만 3 개가 숨겨져 있지만 제대로 느껴지지 않습니다. 올바른 탭에 내 콘텐츠를 어떻게 표시해야합니까?
<section id="tabs">
<div class="tab open">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
</section>
Angular UI bootstrap module에는 각도 모듈로 이식 된 모든 트위터 부트 스트랩 구성 요소가 있습니다. 트위터 부트 스트랩을 사용하고 싶지 않다면 다시 작성하지 말고 사용해야합니다.
tldr : 당신이 탭에 대한 부트 스트랩을 사용한다
부트 스트랩 각 UI에서 부트 스트랩에게 탭 구성 요소를 사용하여 시도하고 콘텐츠에 대한이
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div ng-include src="'red.html'"></div>
</div>
<div class="tab-pane" id="orange">
<div ng-include src="'orange.html'"></div>
</div>
<div class="tab-pane" id="yellow">
<div ng-include src="'yellow.html'"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>