Question

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

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

我还需要将文本更改回＆＃34;更改模板＆＃34;。我在想我需要的是一个切换按钮。

我已经尝试实现我在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

我想我需要做的就是将这两个掠夺者结合在一起，但自从昨晚以来，我已经尝试了很长时间，但我似乎无法做到这一点。我甚至不确定它是否可能。

如果我使用ng-hide和ng-show，我会丢失淡入淡出动画。所以我不认为我想要使用它们。

Answer 1

我希望我能理解你对颜色过渡的期望：

code to plunker

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

然而，我并没有弄清楚你想用hellotext和goodbyetext做什么，但是我很确定这对你来说不是一个大问题，现在你有了切换的解决方案你的小组

角度按钮显示和隐藏div并更改按钮上的文本。

1 个答案: