Изменить div по нажатию кнопки

Question

Я новичок в front-end.Теперь у меня есть 3 divs, который будет на той же странице, и позиция также будет такой же.это как переключение.Таким образом, в начале это будет div, который я покажу

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

, затем есть кнопка, которая выглядит как

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

При нажатии этой кнопки

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

этот div должен отображаться, а не предыдущий.

И при повторном нажатии этой кнопки третий div

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

это должно быть видно, и снова при нажатии первый должен отображаться,Это как круговая мода.

Теперь я попробовал использовать ng-show и ng-if.Может ли кто-нибудь помочь мне с этим?

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

Answer 1

Это довольно просто, вы можете сделать это разными способами, например:

В контроллере Определить переменную области действия (связывается с внешним интерфейсом)

$scope.showView = "firstView"

Определите также функцию:

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

На html-странице определите свои дивы и кнопку

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

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