Угловые кнопки показывают и скрывают divs и изменяют текст на кнопке.

Question

Я пытаюсь сделать кнопку показать и скрыть div. Я думаю, что я почти сделал это, но мне не хватает этой последней части.

Вот что мне хотелось бы сделать: при нажатии на красную кнопку «Изменить шаблон» текст меняется на «назад на страницу 1». Теперь снова нажмите красную кнопку. Тот, который говорит «назад к странице 1» - мне нужно, чтобы на самом деле изменить div ниже на желтую рамку. Сейчас он ничего не делает, когда вы нажимаете красную кнопку во второй раз.

Мне также понадобится текст, чтобы вернуться к «изменению шаблона». Я думаю, что мне нужна кнопка переключения.

Я попытался реализовать несколько переключающих кнопок, которые я уже нашел в stackoverflow, но, похоже, мой другой код может мешать. Я сделал плункер, поэтому его легко увидеть проблему.

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> 

---

UPDATE: Вот еще одна, где кнопка переключения работает на. Но когда я пытаюсь добавить в переходы fade (от первого 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, но я m довольно уверен, что это не должно быть большой проблемой для вас сейчас у вас есть решение для переключения вашей панели