html - Angular 按钮显示和隐藏 div 并更改按钮上的文本。

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>

---

更新:这是另一个可以使用切换按钮的地方。但是当我尝试添加淡入淡出过渡(从第一个 plunker)并让其他按钮工作时，它失败了。

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

我想我需要做的是将这两个 plunkers 组合在一起，但我已经尝试了很长时间，从昨晚开始，我似乎做不到。我什至不确定这是否可能。

如果我使用 ng-hide 和 ng-show 我会失去淡入淡出动画。所以我不认为我想使用那些。

Answer 1

我希望我能很好地理解您对颜色过渡的期望:

code to plunker

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

但是，我不知道你想用 hellotext 和 goodbyetext 做什么，但我很确定这对你来说应该不是什么大问题，现在你有了切换面板的解决方案