AngularJS通过切换按钮的div知名度 [英] AngularJS toggle divs visibility through button

问题描述

我有两个div的多套，并为每个每页一个按钮。该两个div包含交替的内容，该按钮应该处理切换的知名度。我似乎无法想到一个角度解决方案，可以扩展到多个不同的实例在页面（我的脑海里不断想要得到它在JQuery中完成）。

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

我创建了一个例子JSFiddel这里

您将看到两个div p_table 类＆LT;跨度类=触发＆GT; A＆LT; / SPAN＆GT; 。触发应交替两个p_table父DIV中 p_container 。

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.

推荐答案

你是如何做的是纳克级的关键，你也可以NG-显示/ NG隐藏做到这一点。两种实现不需要的JavaScript，只是一个控制器范围。

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：选择基于变量的类，它在切换触发点击

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：显示或隐藏变量。这是做它的典型方式。

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