How to use angularjs to custom sort this data?

Question

My HTML file

 <div ng-controller="MyCtrl">    
<input type="text" ng-model="searchText" />
<ul ng-repeat="strVal in arrVal|filter:searchText|mySort" > 
 <li>{{strVal}}</li>
  </ul></div>

My js file

var app=angular.module('myApp', []);
app.controller('MyCtrl', function ($scope,$filter) {
  $scope.arrVal = ['six','one','two','five','three','four'];  
});

app.filter('mySort', function() {
return function(input) {
  return input.sort();
}
  });

but result is that, I don't want to output this result

five//but it is order by A-Z, I am very unhappy 
four
one
six
three
two

I hope that is my Final output result, any idea

one
two
three
four
five
six

any idea how to do that ,thx you so much

Fiddle

score 1 · Answer 1 · answered Oct 27 '17 at 06:19

You have to convert your words to number i have find this SO Post and get this working something like

app.filter('mySort', function() {

var Small = {
    'zero': 0,
    'one': 1,
    'two': 2,
    'three': 3,
    'four': 4,
    'five': 5,
    'six': 6,
    'seven': 7,
    'eight': 8,
    'nine': 9,
    'ten': 10,
    'eleven': 11,
    'twelve': 12,
    'thirteen': 13,
    'fourteen': 14,
    'fifteen': 15,
    'sixteen': 16,
    'seventeen': 17,
    'eighteen': 18,
    'nineteen': 19,
    'twenty': 20,
    'thirty': 30,
    'forty': 40,
    'fifty': 50,
    'sixty': 60,
    'seventy': 70,
    'eighty': 80,
    'ninety': 90
};

var Magnitude = {
    'thousand':     1000,
    'million':      1000000,
    'billion':      1000000000,
    'trillion':     1000000000000,
    'quadrillion':  1000000000000000,
    'quintillion':  1000000000000000000,
    'sextillion':   1000000000000000000000,
    'septillion':   1000000000000000000000000,
    'octillion':    1000000000000000000000000000,
    'nonillion':    1000000000000000000000000000000,
    'decillion':    1000000000000000000000000000000000,
};

var a, n, g;

function text2num(s) {
    a = s.toString().split(/[\s-]+/);
    n = 0;
    g = 0;
    a.forEach(feach);
    return n + g;
}

function feach(w) {
    var x = Small[w];
    if (x != null) {
        g = g + x;
    }
    else if (w == "hundred") {
        g = g * 100;
    }
    else {
        x = Magnitude[w];
        if (x != null) {
            n = n + g * x
            g = 0;
        }
        else { 
            alert("Unknown number: "+w); 
        }
    }
}

    return function(input) {
    console.log(input);
      return input.sort(function(a, b) {
  return text2num(a) - text2num(b);
});
    }
  });

Working fiddle

Manikandan Velayutham · Answer 2 · 2017-10-27T08:30:52.803

Try like this.

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

app.controller('myController', function($scope, $filter) {
   $scope.arrVal = ['six','y','one','x','two','five','three','four','z'];  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
        <input type="text" ng-model="searchText" />
  <ul ng-repeat="strVal in arrVal|filter:searchText | orderBy:'':'true'" >
      <li>{{strVal}}</li>
  </ul>
  </div>
</div>

How to use angularjs to custom sort this data?

2 Answers2