JSFiddle - React, Tailwind, and code Playground

by Alexander Arutuniants

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<div ng-controller="BaseCtrl">
    <div class="controlls"> <span class="btn_arrow previous inactive" ng-click="graphSelectorInc(-1)">Vorige</span>

        <p>{{ selector }}</p> <span class="btn_arrow next" ng-click="graphSelectorInc(+1)">Volgende</span>

    </div>
</div>

JavaScript

angular.module('myApp', [])
    .service('GraphSelector', function () {
    var graphSelectorIndex = 0;
    var graphSelector = [{
        'byPeriod': 'Periode'
    }, {
        'byHour': 'Uur'
    }, {
        'byDay': 'Dag'
    }];
    return {
        selector: this.selector,
        inc: function (inc) {
            graphSelectorIndex += inc;
            if (graphSelectorIndex < 0) {
                graphSelectorIndex = graphSelector.length - 1;
            } else if (graphSelectorIndex >= graphSelector.length) {
                graphSelectorIndex = 0;
            }
            console.log(Object.keys(graphSelector[graphSelectorIndex]));
            return graphSelector[graphSelectorIndex][Object.keys(graphSelector[graphSelectorIndex])[0]];
        }

    }
})
    .controller('BaseCtrl', function ($scope, GraphSelector) {

    $scope.graphSelectorInc = function (inc) {
        $scope.selector = GraphSelector.inc(inc);

    }
});