JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="spin">
    <div ng-controller="spinn">
        <input spinner options="options" value="1" readonly />
    </div>
</div>

JavaScript

$.widget("ui.formatSpinner", $.ui.spinner, {
    options: {},
    _parse: function (value) {
        if (typeof value === "string") {
            return this.options.values.indexOf(value);
        }
        return value;
    },
    _format: function (value) {
        //wrap around
        if (value < 0) {
            value = this.options.values.length - 1;
        }
        if (value > this.options.values.length - 1) {
            value = 0;
        }
        var format = this.options.values[value];
        return format;
    },
});

angular.module('spin', []).directive('spinner', function () {
    return {
        restrict: 'A',
        scope: {
            options: "=options"
        },
        link: function ($scope, $elem, attrs) {
            $elem.formatSpinner($scope.options);
        }
    }
}).controller('spinn', ['$scope', function($scope) {
    $scope.options = {
        values: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "S"]
    }
}]);