JSFiddle - React, Tailwind, and code Playground

by DineshAngappa

HTML

<div ng-app="Demo" ng-controller="DemoController">
<h1>User-Friendly Sort Of Alpha-Numeric Data In JavaScript</h1>

    <ul>
        <li ng-repeat="file in files">{{ file.name }} ({{file.id}})</li>
    </ul>
    <form ng-submit="saveFile()">
        <input type="text" ng-model="form.name" size="20" />
        <input type="submit" value="Add File" />
    </form>
</div>

JavaScript

var app = angular.module("Demo", []);

app.run(["$rootScope", function($rootScope) {
	var natValue = function (value) {
        var padding = '00000000000000000000'
        value = value.replace(/(\d+)((\.\d+)+)?/g, function ($0, integer, decimal, $3) {
            if (decimal !== $3) {
                // treat as a series of integers,
                // rather than a decimal
                 return(
                        padding.slice( integer.length ) +
                        integer +
                        decimal
                    );
               /* return $0.replace(/(\d+)/g, function ($d) {
                    return padding.slice($d.length) + $d
                }); */
            } else {
                decimal = decimal || ".0";
                return padding.slice(integer.length) + integer + decimal + padding.slice(decimal.length);

            }
        });
		return value;
    };
	$rootScope.natural = function (field) {
        return function (item) {
            return natValue(item[field]);
        }
    };
}]);

app.controller("DemoController", ['$scope', 'orderByFilter', function ($scope, orderBy) {
    $scope.files = [{
        id: 1,
        name: "kittens-1.jpg"
    }, {
        id: 2,
        name: "kittens-2.jpg"
    }, {
        id: 3,
        name: "kittens-12.jpg"
    }];

    $scope.form = {
        name: "kittens-3.jpg"
    };

    $scope.saveFile = function () {
        if (!$scope.form.name) {
            return;
        }
        addFile($scope.form.name);
    };

var naturalNum = function (field) {
        return function (item) {
            return natValue(item[field]);
        }
    };

	var natValue = function (value) {
        var padding = '00000000000000000000'
        value = value.replace(/(\d+)((\.\d+)+)?/g, function ($0, integer, decimal, $3) {
            if (decimal !== $3) {
                // treat as a series of integers,
                // rather than a decimal
                 /*return(
                    ...