javascript - 使用 ng-click 切换 3 个不同的 div

Question

我有三个 anchor 。每个都需要在其下方显示一个独特的全 Angular div，类似于本网站上的 ipad 示例 https://sendtoinc.com/

例如我单击第一个 anchor ，它会打开第一个容器，第二个会关闭第一个并打开第二个。

我可以使用 ng-click 切换事件状态来执行此功能吗？我需要在 Controller 内完成吗？

下面是一行 anchor 。要显示的内容在单独的容器中。任何想法或帮助将不胜感激。

<div class="row">
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor active">
                <div class="box box-drop ">
                    <h3>Data Explorer</h3>
                    <p>It’s a brave new data world.  Explore and navigate new realms of possibility such as post density, sentiment analysis, and even sort by hue and saturation.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor">
                <div class="box box-drop">
                    <h3>Analytics</h3>
                    <p>Exciting twists on old standards, Socialight's analytic platform allows you to analyze any social account in the world. Track your competitors and make informed, comparative decisions for your next campaign.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor">
                <div class="box box-drop">
                    <h3>Export & Embed</h3>
                    <p>Enliven billboards, websites, or TV screens with tailored feeds of tagged content from your Data Explorer  you can Improve your nextTransfer all of this useful information to outward facing products. </p>
                </div>
            </a>
        </div>
    </div>
</div>

附件是它的外观截图。顶行包含更改下方内容的 anchor 。

Answer 1

在您的标记中使用 ng-switch 或 ng-if，在您的导航中使用 ng-clicks

<div class="row">
    <div class="col-xs-12 col-md-4" ng-click="page=1">
        <a href="" class="box-anchor active">
            <div class="box box-drop ">
                <h3>Data Explorer</h3>
                <p>It’s a brave new data world.  Explore and navigate new realms of possibility such as post density, sentiment analysis, and even sort by hue and saturation.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=2">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Analytics</h3>
                <p>Exciting twists on old standards, Socialight's analytic platform allows you to analyze any social account in the world. Track your competitors and make informed, comparative decisions for your next campaign.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=3">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Export & Embed</h3>
                <p>Enliven billboards, websites, or TV screens with tailored feeds of tagged content from your Data Explorer  you can Improve your nextTransfer all of this useful information to outward facing products. </p>
            </div>
        </a>
    </div>
</div>

在您的内容标记中使用 ng-switch。注意:ng-switch-default 是用户未选择页面时将显示的页面。另请注意，如果用户选择一个，它将显示默认页面，因为在此示例中没有映射到“1”的 ng-switch。

<div ng-switch="page">
    <div ng-switch-default>
        Content page one
    </div>
    <div ng-switch-when="2">
        Content page two
    </div>
    <div ng-switch-when="3">
        Content page three
    </div>
</div>