AngularJS orderBy filter not working when use orderBy : 'rate' and the rest date and product works fine
(function(){
var app = angular.module('tableApp',[ ]);
app.controller('tableController', function($scope){
$scope.items = [
{ product: 'Lorem ipsum', date: '12-March-2013', rate:'12.35'},
{ product: 'dolor sit', date: '1-January-2011', rate:'60.54'},
{ product: 'consectetur', date: '12-December-2014', rate:'12.56'},
{ product: 'adipisicing', date: '14-Noveber-2014', rate:'0.99'},
{ product: 'do eiusmod', date: '2-Noveber-2014', rate:'4.001'},
{ product: 'magna aliqua', date: '16-February-2014', rate:'06.54'},
{ product: 'exercitation', date: '30-Noveber-2014', rate:'60.32'},
{ product: 'consequat', date: '5-May-2014', rate:'5.12'},
{ product: 'reprehenderit', date: '12-April-2014', rate:'8.99'},
{ product: 'voluptate', date: '18-Noveber-2014', rate:'34.54'},
{ product: 'ugiat nulla', date: '28-June-2014', rate:'55.12'},
{ product: 'occaecat cupidatat', date: '21-June-2014', rate:'99.54'},
{ product: 'proident', date: '31-December-2014', rate:'15.50'},
{ product: 'culpa qui', date: '1-Noveber-2014', rate:'34.05'},
{ product: 'mollit anim', date: '3-Noveber-2014', rate:'45.00'}
]
});
})();<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
<table class="table table-striped table-hover" ng-controller="tableController">
<thead>
<tr>
<th>Product</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy : 'rate'">
<td>{{item.product}}</td>
<td>{{item.date}}</td>
<td>{{item.rate | currency:"£"}}</td>
</tr>
</tbody>
</table>
</div>
The attribute rate is a String, so orderBy : 'rate' sorts them as Strings (which is totally working).
If you want to sort them correctly, you should remove quotes around the rate value (so they will be sorted as Numbers).
Like this:
{ product: 'mollit anim', date: '3-Noveber-2014', rate: 45.00 }
Also, remove the 0 in 06.54.
http://jsfiddle.net/ruytehtc/ (Same HTML, removed quotes and leading 0)
you can try out this....
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
(function(){
var app = angular.module('tableApp',[ ]);
app.controller('tableController', function($scope){
$scope.items = [
{ product: 'Lorem ipsum', date: '12-March-2013', rate:12.35},
{ product: 'dolor sit', date: '1-January-2011', rate:60.54},
{ product: 'consectetur', date: '12-December-2014', rate:12.56},
{ product: 'adipisicing', date: '14-Noveber-2014', rate:0.99},
{ product: 'do eiusmod', date: '2-Noveber-2014', rate:4.001},
{ product: 'magna aliqua', date: '16-February-2014', rate:6.54},
{ product: 'exercitation', date: '30-Noveber-2014', rate:60.32},
{ product: 'consequat', date: '5-May-2014', rate:5.12},
{ product: 'reprehenderit', date: '12-April-2014', rate:8.99},
{ product: 'voluptate', date: '18-Noveber-2014', rate:34.54},
{ product: 'ugiat nulla', date: '28-June-2014', rate:55.12},
{ product: 'occaecat cupidatat', date: '21-June-2014', rate:99.54},
{ product: 'proident', date: '31-December-2014', rate:15.50},
{ product: 'culpa qui', date: '1-Noveber-2014', rate:34.05},
{ product: 'mollit anim', date: '3-Noveber-2014', rate:45.00}
]
});
})();
</script>
</head>
you just change your array with this array it will defiantly work..