AngularJS 通过按钮切换 div 可见性 [英] AngularJS toggle divs visibility through button

问题描述

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

我在这里创建了一个 JSFiddle 示例.

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

解决方案

关键在于使用 ng-class，您也可以使用 ng-show/ng-hide.这两种实现都不需要 javascript，只需要一个控制器范围.

NG-CLASS:根据变量选择一个类，在触发点击时切换.

<p class="p_table" ng-class="{hidden:!show,chaldean:show}">这是实际内容</p><p class="p_table" ng-class="{hidden:show,chaldean:!show}">这是音译内容</p><span class="trigger" ng-click="show=!show">A</span>

NG-SHOW/NG-HIDE:显示或隐藏变量.这是典型的做法.

<p class="p_table" ng-show="show">这是实际内容</p><p class="p_table" ng-hide="!show">这是音译内容</p><span class="trigger" ng-click="show=!show">A</span>

I have a multiple sets of two divs and a button for each per page. The two divs contains alternating content that the button should handle switching visibility. I can't seem to think of an Angular solution that can be extensible to multiple separate instances in the page (my mind keeps wanting to get it done in JQuery).

I have created a JSFiddle example here.

You will see two divs p_table class with <span class="trigger">A</span>. The trigger should alternate the two p_table inside their parent div p_container.

解决方案

The key for how you are doing it is with ng-class, you can also do it with ng-show/ng-hide. Both implementations require no javascript, just a controller scope.

NG-CLASS: Choose a class based on a variable, which toggles on trigger click.

<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: Show or hide on variable. This is the typical way of doing it.

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

这篇关于AngularJS 通过按钮切换 div 可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！