JSFiddle - React, Tailwind, and code Playground

by tadchristiansen

HTML

<div ng-app="angularApp">
    <div ng-controller="testCtrl">
        <div ng-switch="navStep">
            <div ng-switch-when="activity_info">test1</div>           
            <div ng-switch-when="add_class">test2</div>
            <div ng-switch-when="permissions">test3</div>
        </div>
        <button ng-click="navNext()">next</button>
        <button ng-click="navBack()">back</button>
    </div>
</div>

<script type="text/ng-template" id="test1.html">
  test1
</script>
<script type="text/ng-template" id="test2.html">
  test2
</script>
<script type="text/ng-template" id="test3.html">
  test3
</script>

JavaScript

angular.module('angularApp', []);

function testCtrl($scope)
{
    $scope.wizardSteps = ["activity_info", "add_class", "permissions"];
    $scope.currWizardStep = 0;
    $scope.navStep = $scope.wizardSteps[$scope.currWizardStep];
    
    $scope.navNext = function () {
        $scope.currWizardStep++;
        $scope.navStep = $scope.wizardSteps[$scope.currWizardStep];
    }
    $scope.navBack = function () {
        $scope.currWizardStep--;
        $scope.navStep = $scope.wizardSteps[$scope.currWizardStep];
    }
    
}