Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="firstCtrl">
    <textarea ng-model="students" style="width:300px; height:300px;" ng-list="&#10;" ng-trim="false"></textarea>
    <p ng-repeat="s in students | orderBy:customOrder">{{s}}</p>
  {{students}}
      </div>
</body>
</html>
 
var app = angular.module('app', []);
​
​
 
  
​
app.controller('firstCtrl', function($scope){
 
$scope.customOrder = function (item) {
  var parsedItem = item.substr(0, item.indexOf(':'));
        switch (parsedItem) {
          case 'display':
            return 1;
case 'flex':
    return 2;
case 'flex-basis':
    return 3;
case 'flex-direction':
    return 4;
case 'flex-flow':
    return 5;
case 'flex-grow':
    return 6;
case 'flex-shrink':
    return 7;
case 'flex-wrap':
    return 8;
case 'align-content':
    return 9;
case 'align-items':
    return 10;
case 'align-self':
    return 11;
case 'justify-content':
    return 12;
case 'order':
    return 13;
case 'position':
    return 14;
case 'top':
    return 15;
case 'right':
    return 16;
case 'bottom':
    return 17;
case 'left':
    return 18;
case 'columns':
    return 19;
case 'column-gap':
    return 20;
case 'column-fill':
    return 21;
case 'column-rule':
    return 22;
case 'column-span':
    return 23;
case 'column-count':
    return 24;
case 'column-width':
    return 25;
case 'float':
    return 26;
case 'clear':
    return 27;
case 'transform':
    return 28;
case 'transform-origin':
    return 29;
      case 'visibility':
    return 30;
case 'opacity':
    return 31;
case 'z-index':
    return 32;
case 'margin':
    return 33;
case 'margin-top':
    return 34;
case 'margin-right':
    return 35;
case 'margin-bottom':
    return 36;
case 'margin-left':
    return 37;
case 'outline':
    return 38;
case 'border':
    return 39;
case 'border-top':
    return 40;
case 'border-right':
    return 41;
case 'border-bottom':
    return 42;
case 'border-left':
    return 43;
case 'border-width':
    return 44;
case 'border-top-width':
    return 45;
case 'border-right-width':
    return 46;
case 'border-bottom-width':
    return 47;
case 'border-left-width':
    return 48;
case 'border-style':
    return 49;
case 'border-top-style':
    return 50;
case 'border-right-style':
    return 51;
case 'border-bottom-style':
    return 52;
case 'border-left-style':
    return 53;
case 'border-color':
    return 54;
case 'border-top-color':
    return 55;
case 'border-right-color':
    return 56;
case 'border-bottom-color':
    return 57;
case 'border-left-color':
    return 58;
case 'border-radius':
    return 59;
case 'border-top-left-radius':
    return 60;
case 'border-top-right-radius':
    return 61;
case 'border-bottom-left-radius':
    return 62;
case 'border-bottom-right-radius':
    return 63;
case 'box-shadow':
    return 64;
case 'box-sizing':
    return 65;
case 'background':
    return 66;
case 'background-color':
    return 67;
case 'background-image':
    return 68;
case 'background-repeat':
    return 69;
case 'background-position':
    return 70;
case 'background-size':
    return 71;
case 'cursor':
    return 72;
case 'width':
    return 73;
case 'min-width':
    return 74;
case 'max-width':
    return 75;
case 'height':
    return 76;
case 'min-height':
    return 77;
case 'max-height':
    return 78;
case 'overflow':
    return 79;
case 'padding':
    return 80;
case 'padding-top':
    return 81;
case 'padding-right':
    return 82;
case 'padding-bottom':
    return 83;
case 'padding-left':
    return 84;
case 'list-style':
    return 85;
case 'caption-side':
    return 86;
case 'table-layout':
    return 87;
case 'border-collapse':
    return 88;
case 'border-spacing':
    return 89;
case 'empty-cells':
    return 90;
case 'vertical-align':
    return 91;
case 'text-align':
    return 92;
case 'text-decoration':
    return 93;
case 'text-indent':
    return 94;
case 'text-overflow':
    return 95;
case 'text-rendering':
    return 96;
case 'text-shadow':
    return 97;
case 'text-transform':
    return 98;
case 'line-height':
    return 99;
case 'word-spacing':
    return 100;
case 'letter-spacing':
    return 101;
case 'white-space':
    return 102;
case 'color':
    return 103;
case 'font':
    return 104;
case 'font-family':
    return 105;
case 'font-size':
    return 106;
case 'font-weight':
    return 107;
case 'font-style':
    return 108;
case 'font-smoothing':
    return 109;
case 'content':
    return 110;
case 'quotes':
    return 111;
case 'transition':
    return 112;
case 'transition-property':
    return 113;
case 'transition-duration':
    return 114;
case 'transition-timing-function':
    return 115;
case 'transition-delay':
    return 116;
   
}
  };
  
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers