在AngularJs中创建选项卡

Question

我正在尝试使用仅使用ng-show和ng-hide的div创建简单的标签。我不想使用jQuery或BootStrap。我已创建选项卡但我无法正确处理div。

JS Fiddle

<div  ng-app ng-controller="sample">

    <div class="cb" ng-click="showDetails = ! showDetails">tab 1</div>
    <div class="cb" ng-click="showDetails = ! showDetails">tab 2</div>

    <div ng-hide="showDetails">
        <p>first</p>
     </div>

    <div ng-show="showDetails">
        <p>second</p>
    </div>

即使我单击第一个选项卡，也会显示第二个选项卡的内容。 单击第一个选项卡时如何仅显示第一个内容，单击第二个选项卡时如何才显示第二个内容？

提前谢谢。

Answer 1

http://jsfiddle.net/x8xfM/2/

<div  ng-app ng-controller="sample" ng-init="tab=1">

        <div class="cb" ng-click="tab = 1">tab 1</div>
        <div class="cb" ng-click="tab = 2">tab 2</div>

        <div ng-show="tab == 1">
            <p>first</p>
         </div>

        <div ng-show="tab == 2">
            <p>second</p>
        </div>
</div>

在您的情况下，showDetails = !showDetails每次单击任何选项卡时都会切换活动标签。