Extending built-in directives

by clanoopchandran

HTML

<script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-app='myApp'>
    <div ng-controller="controller">
        <button ng-click="order('name')">Order by Ascending</button>
        <button ng-click="orderAsc('name')">Order by Descending</button>
        
        <ul>
            <li ng-repeat="item in testData | fltOrderBy:'name'">
                {{item.name}}
            </li>
        </ul>
        <ul>
            <li ng-repeat="item in testData1 | fltOrderBy:'name':true">
                {{item.name}}
            </li>
        </ul>        
    </div>
</div>

JavaScript

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

myApp.controller('controller', ['$scope','$filter' ,function ($scope,$filter) {    
    $scope.testData = 
        [{name: "101"},{name: "1012"},{name: "105"},
        {name: "115"},{name: "111"},{name: "113"},
        {name: "127"},{name: "125"},{name: "124"},
        {name: "1010"},{name: "102"},{name: "1011"},
        {name: "103"},{name: "110"},{name: "104"}];           
    
    $scope.testData1 = 
        [{name: "101"},{name: "1012"},{name: "105"},
        {name: "115"},{name: "111"},{name: "113"},
        {name: "127"},{name: "125"},{name: "124"},
        {name: "1010"},{name: "102"},{name: "1011"},
        {name: "103"},{name: "110"},{name: "104"},{name: "103a"}]; 
    
}]).filter('fltOrderBy',["$filter",function($filter){
    
    return function(data,predicate,reverse){        
        var isNumber=true;
        angular.forEach(data,function(item){
            if(!isNaN(Number(item[predicate])))
                return item._sortID= parseInt(item[predicate]);
            else
                return (isNumber=false);
         });        
        return $filter('orderBy')(data, (isNumber)?'_sortID':predicate,reverse);
    }
}]);