Угловая кнопка переключения или, возможно, другое решение

Question

Я пытаюсь сделать кнопку show и скрыть 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> 

Answer 1

В соответствии с вашим кодом, при нажатии на кнопку она всегда будет скрывать «hellotext» и шоу «goodbyetext»

Что вам нужно сделать, это добавить это функция, которая проверяет значение hellotext и/или goodbyetext и переключает его на основе значений

Надеюсь, это поможет!

Answer 2

Если я вам позвоню, вам нужно поменять кнопки. Этот случай будет более естественно использовать нг-шоу/нг скрыть

<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