JSFiddle - React, Tailwind, and code Playground

by vishalvasani

HTML

<div ng-app="test">
    <toggle-values></toggle-values>
</div>

CSS

.status:hover {
    cursor: pointer;
    color: blue;
}

JavaScript

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

angular.module('test').directive('toggleValues',function(){
    return {
        restrict: 'E',
        replace: true,
        template: '<div>Set Status:<div ng-repeat="value in values" class="status" ng-click="changeTo($index)">{{value}}</div><span ng-click="next()">Current Status (click to cycle): {{values[selectedValue]}}</span></div>',
        controller: ['$scope', '$element', function ($scope, $element) {
            $scope.values = ["Active", "Inactive", "Pending"];
            $scope.changeTo = function (index) {
                $scope.selectedValue = (index < $scope.values.length) ? index : 0;
            };
            
            $scope.next = function () {
                $scope.selectedValue = ($scope.selectedValue + 1) % $scope.values.length;
                // stolen from http://stackoverflow.com/a/18592722/2452446
            };
            
            $scope.selectedValue = 0;
        }]
    };
});