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。

有关其工作原理的其他说明，请参阅'this' vs $scope in AngularJS controllers

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>

AngularJS中的选项卡式导航

2 个答案: