navigation - AngularJS 中的标签式导航

Question

在 AngularJS 中，如何创建一个简单的选项卡式导航（在单击选项卡时切换内容）？

HTML：

<ul class="tabbed-navi">
    <li class="active">
        <a href="#one">Nav One</a>
    </li>
    <li>
        <a href="#two">Nav Two</a>
    </li>
    <li>
        <a href="#three">Nav Three</a>
    </li>
</ul>

<div class="active">
    Content One
</div>
<div>
    Content Two
</div>
<div>
    Content Three
</div>

我正在寻找一个简单的、对初学者友好的示例，而不是“下载这些其他东西然后......”

Answer 1

请参阅 AngularJS 主页的“创建组件”部分。该示例应用程序定义了两个指令：pane和tabs.

有关其工作原理的其他说明，请参阅AngularJS 控制器中的“this”与 $scope

Answer 2

也许像这样的东西......

<ul class="tabbed-navi">
    <li class="active">
        <a href ng-click="option=1">Nav One</a>
    </li>
    <li>
        <a href ng-click="option=2">Nav Two</a>
    </li>
    <li>
        <a href ng-click="option=3">Nav Three</a>
    </li>
</ul>

<div ng-class="option==1? 'active':''">
    Content One
</div>
<div ng-class="option==2? 'active':''">
    Content Two
</div>
<div ng-class="option==3? 'active':''">
    Content Three
</div>