Question

我正在尝试按钮显示并隐藏div。我想我几乎已经完成了，但我最后一部分错过了这个。

以下是我想要发生的事情：当您点击红色的“更改模板”按钮时，文本将变为“返回第1页”。现在再次单击红色按钮。说“回到第1页”的那个 - 我需要将实际更改下面的div改为黄色框。现在，当你第二次点击红色按钮时，它什么都不做。

我还需要将文本更改回“更改模板”。我在想我需要的是一个切换按钮。

我已经尝试实现我在stackoverflow上找到的多个切换按钮，但似乎我的其他代码可能会妨碍。我做了一个plunker所以很容易看到问题。

http://plnkr.co/edit/RpqoXXHGBeYaBzIlD8Qb?p=preview

<div class="btn top-menu-button finchbutton red" ng-click="finchange='show';finpage1='';finpage2='';finpage3='';hellotext='hide';goodbyetext='show'">
<span class="btntext" ng-class="hellotext">Change Template</span><span class="btntext" ng-class="goodbyetext">Back To Template</span></div>
<div class="btn top-menu-button finbutton1 orange" ng-click="finpage1='show';finpage2='';finpage3='';finchange='';hellotext='show';goodbyetext='hide'">Page 1</div>
<div class="btn top-menu-button finbutton2 blue" ng-click="finpage2='show';finpage1='';finpage3='';finchange='';hellotext='show';goodbyetext='hide'">Page 2</div>
<div class="btn top-menu-button finbutton3 pink" ng-click="finpage3='show';finpage1='';finpage2='';finchange='';hellotext='show';goodbyetext='hide'">Page 3</div>

Answer 1

根据您的代码，每当您点击按钮时，它将始终隐藏“hellotext”并显示“goodbyetext”

你需要做的是add是一个函数，它检查hellotext和/或goodbyetext的值并根据值切换它

希望它有所帮助!!

Answer 2

如果我找到你，你需要一个切换按钮行为。这种情况下使用ng-show / ng-hide

会更自然

<div ng-app="ngAnimate" ng-init="firstOn=true;">


  <div class="btn top-menu-button finchbutton red" ng-click="firstOn = !firstOn;">
    <span class="btntext" ng-show="firstOn">Change Template</span><span ng-hide="firstOn" class="btntext">Back To Page 1</span></div>
  <div class="btn top-menu-button finbutton1 orange" ng-click="">Page 1</div>
  <div class="btn top-menu-button finbutton2 blue" ng-click="">Page 2</div>
  <div class="btn top-menu-button finbutton3 pink" ng-click="">Page 3</div>

  <br>
  <span class="template-panel red" ng-show="!firstOn">Red</span>
  <span class="template-panel orange" ng-show="firstOn">Orange</span>
  <span class="template-panel blue hide">Blue</span>
  <span class="template-panel pink hide">Pink</span>

</div>

你可以在http://plnkr.co/edit/es5pgmrgsXbm6bP8CSrr

看到这个例子（我将你的想法简化了一点，以明白这个想法）

角度切换按钮或可能是另一种解决方案

2 个答案: