JSFiddle - React, Tailwind, and code Playground

by DineshAngappa

HTML

<div ng-app="myApp">
<div ng-controller="ctrl">

<select ng-options="item.name as item.name for item in data | orderBy: customSort " ng-model="test">
  {{item.name}}
</select>

</div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('ctrl',function($scope){
$scope.data = [
{name:'COM11'},
{name:'COM5'},
{name:'COM1'}
];

var reA = /[^a-zA-Z]/g;
var reN = /[^0-9]/g;

$scope.customSort = function(a, index) {
console.log(a[index]);
	sortAlphaNum(a.name)
}

var sortAlphaNum = function(a, b) {
	var AInt = parseInt(a, 10);
        var BInt = parseInt(b, 10);
    
        if(isNaN(AInt) && isNaN(BInt)){
            var aA = a.replace(reA, "");
            var bA = b.replace(reA, "");
            if(aA === bA) {
                var aN = parseInt(a.replace(reN, ""), 10);
                var bN = parseInt(b.replace(reN, ""), 10);
                return aN === bN ? 0 : aN > bN ? 1 : -1;
            } else {
                return aA > bA ? 1 : -1;
            }
        }else if(isNaN(AInt)){
            return 1;
        }else if(isNaN(BInt)){
            return -1;
        }else{
            return AInt > BInt ? 1 : -1;
        }
}

// this will not work 
//$scope.data = ["1","2","10","a","b","C"];
})