AngularJS переключает видимость divs через кнопку

У меня есть несколько наборов из двух div и кнопка для каждой страницы. Два divs содержат чередующийся контент, который кнопка должна обрабатывать видимость переключения. Кажется, я не думаю о решении Angular, которое может быть расширяемым для нескольких отдельных экземпляров на странице (мой разум продолжает делать это в JQuery).

Я создал здесь пример JSFiddle.

Вы увидите два класса div p_table с <span class="trigger">A</span>. Триггер должен чередовать два p_table внутри своего родительского div p_container.

Ответ 1

Ключ к тому, как вы это делаете, с ng-классом, вы также можете сделать это с помощью ng-show/ng-hide. Обе реализации не требуют javascript, просто область контроллера.

NG-CLASS: выберите класс, основанный на переменной, которая переключается при нажатии триггера.

<div class="p_container">
  <p class="p_table" ng-class="{hidden:!show,chaldean:show}">This is actual content</p>
  <p class="p_table" ng-class="{hidden:show,chaldean:!show}">This is transliterated content</p> 
  <span class="trigger" ng-click="show=!show">A</span>
</div>

NG-SHOW/NG-HIDE: Показать или скрыть переменную. Это типичный способ сделать это.

<div class="p_container">
  <p class="p_table" ng-show="show">This is actual content</p>
  <p class="p_table" ng-hide="!show">This is transliterated content</p> 
  <span class="trigger" ng-click="show=!show">A</span>
</div>

Ответ 2

Вот как я это сделал, используя ngHide и крошечную функцию переключения. Рабочая демонстрация Здесь. Надеюсь, это поможет

Моя разметка HTML

<div ng-app="myApp" ng-controller="myCtrl">
            <div id="filter-row">
                <span
                    id="toggle-filter"
                    ng-click="toggleFilter()">
                    <i class="glyphicon glyphicon-heart"></i>
                </span>

                <div class="hiddenDiv" ng-hide="toggle">
                    <p>I am the hidden Div!</p>
                </div>
            </div>
</div>

My AngularJS Controller

var myApp = angular.module("myApp", []);
myApp.controller ("myCtrl", ['$scope', function($scope){
  $scope.toggle = true;
  $scope.toggleFilter = function() {
       $scope.toggle = $scope.toggle === false ? true : false;
  }
}]);