Change a div on click of button

Question

I am new to front-end . Now, Here I have 3 divs which will be on the same page.and the position will also be same. it is like toggling . So at the start this will be the div that I will show

<div text-angular id="htmlEditorId" >Abc</div>

then there is button whick is like

<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>

On click of that button

<div text-angular id="secon">abcd</div>

this div should be shown and not the previous one.

And on again click of that button a third div

<div text-angular id="third">azzzbcd</div>

this should be seen and again on click first one should show . Its like a round robin fashion .

Now what I tried is using ng-show and ng-if . Can any one help me with this?

$scope.changeTab = function() {
     $scope.showfirst = true;
  $scope.showsecond = false;
}

Answer 1

It's quite simple, you can do it in many ways, for example:

In the controller Define a scoped variable (bindable with the front-end)

$scope.showView = "firstView"

Define also a function:

$scope.changeView = function(value) {
     $scope.showView = value;
}

In the html page define your divs and button

<button ng-click="changeView('secondView')">Chage View</button>

<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>