AngularJS 选项卡内容

我应该如何实现这一点：

4 个选项卡，可在单击时打开并将视图加载到子项中。

尝试使用 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>

您应该对选项卡使用 bootstrap，对内容使用 ng-include像这样的东西

<!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>

Angular UI 引导模块将所有 Twitter 引导组件移植为 angular 模块。你应该使用它而不是重新发明它（除非你不能/不想使用Twitter引导）。

tldr：尝试使用角度 UI 引导程序中的引导选项卡组件

相关内容

最新更新

热门标签：