Переключить 3 разных divs с ng-click

Question

У меня есть три якоря. Каждому нужно показать уникальную, полную ширину div ниже нее, аналогичную примеру ipad на этом сайте. https://sendtoinc.com/

E.g. Я нажимаю на первый якорь, и он открывает первый контейнер, а второй закрывает первый и открывает второй.

Могу ли я использовать ng-click для переключения активного состояния для выполнения этой функции? Нужно ли мне это делать в контроллере?

Ниже приведена строка с якорями. Содержимое, которое будет отображаться, находится в отдельном контейнере. Любые мысли или помощь будут оценены.

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

прилагается скриншот того, что он выглядит. Верхняя строка содержит анкеры, которые изменяют содержание ниже.

Answer 1

В вашем использовании разметки либо нг-переключателя или нг-если и в навигационном использовании нг щелкает

<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-default - это страница, которая покажет, когда пользователь не выбрал страницу. Также обратите внимание, если пользователь выбирает один, он покажет страницу по умолчанию, потому что в этом примере не указан ng-переключатель, который отображается в «1».

<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

Посмотрите на реализации углового бутстраповского аккордеона.

Он может делать аналогичную вещь, когда он закрывает все остальные группы аккордеона, когда вы его расширяете.

код аккордеон доступен на GitHub https://github.com/angular-ui/bootstrap/tree/master/src/accordion

В частности, вы, вероятно, заинтересованы в функции closeOthers. Обратите внимание, что вам придется логически группировать свои divs так или иначе, чтобы это работало.

// 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; 
     } 
    }); 
} 
}; 

Answer 3

Вы можете использовать нг-класс для переключения в «активный» класс, который бы показать/скрыть/переход вашей дивы контента.

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

С выше, нажав на дивы с помощью директивы нг-клик изменит myActive переменную вашего осциллографа к соответствующему значению. Затем это даст «активный» класс в разделе ниже. Затем вы могли отображать/скрывать контент на основе «активного» класса и добавлять некоторые переходы CSS, чтобы он выглядел сногсшибательно.