Question

我有多组两个div，每个页面都有一个按钮。这两个div包含按钮应处理切换可见性的交替内容。我似乎无法想到一个可以扩展到页面中多个单独实例的Angular解决方案（我的想法一直希望在JQuery中完成它）。

您会看到两个带有p_table的div <span class="trigger">A</span>类。触发器应在其父div p_container内交替使用两个p_table。

Answer 1

你如何做的关键是ng-class，你也可以用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>

Answer 2

我是这样做的，使用ngHide和一个微小的切换功能。工作演示Here。我希望这有帮助

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

我的AngularJS控制器

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

AngularJS切换通过按钮划分可见性

2 个答案: