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

Question

I have three anchors. Each one needs to show a unique, full-width div below it similar to the ipad example on this site https://sendtoinc.com/

Eg I click the first anchor and it opens the first container and the second closes the first and opens the second.

Can I use ng-click to toggle an active state to perform this function? Do i need to do it within the controller?

Below is a row with the anchors. The content to be displayed is in a separate container. Any thoughts or help would be appreciated.

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

Attached is a screenshot of what it looks like. The top row contains the anchors which change the content below.

Answer 1

In your markup use either an ng-switch or an ng-if and in your navigation use 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>

Use the ng-switch in your content markup. Note: ng-switch-default is the page that will show when user hasn't selected a page. Also note if user selects one, it will show the default page because theres no ng-switch that is mapped to "1" in this example.

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

Answer 2

You could use ng-class to toggle an 'active' class, which would show/hide/transition your content divs.

<div class="row">
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 1">
                <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" ng-click="myActive = 2">
                <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" ng-click="myActive = 3">
                <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>


<div ng-class="{active: myActive == 1}">Content Area 1</div>
<div ng-class="{active: myActive == 2}">Content Area 2</div>
<div ng-class="{active: myActive == 3}">Content Area 3</div>

With the above, clicking the divs with the ng-click directive will change your scope's myActive variable to the corresponding value. That will then give the 'active' class to the section below it. You could then show/hide content based on the 'active' class, and add some CSS transitions to make it look snazzy.

Answer 3

Look at the implementation of angular bootstrap accordion.

It can do a similar thing where it closes all other accordion groups when you expand one.

The accordion code is available on github https://github.com/angular-ui/bootstrap/tree/master/src/accordion

In particular you are probably interested in the closeOthers function. Notice you'll have to logically group your divs somehow for this to work.

// Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to 
this.closeOthers = function(openGroup) { 
    var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers; 
    if ( closeOthers ) { 
        angular.forEach(this.groups, function (group) { 
        if ( group !== openGroup ) { 
            group.isOpen = false; 
        } 
   }); 
 } 
};