javascript - AngularJS orderBy 百分比

Question

我有一个带有一列的表，我试图对这些百分比进行排序，但即使我尝试了 parseFloat 和其他一些确保 angularjs 的方法，它们也没有按预期排序(使用 1.5.0)将成功订购它们。

[
    {percentage: 8.82}
    {percentage: 0.00}
    {percentage: 11.36}
    {percentage: 21.88}
    {percentage: 25.74}
    {percentage: 22.22}
]

以下两个屏幕截图显示了百分比排序的两种顺序。

 <tr ng-repeat="p in percentages|orderBy:orderByField:reverseSort">
    <td>{{p.percentage}}%</td>
 </tr>

percentages 来 self 的 Nodejs 服务器，我在其中创建一个百分比并使用 toFixed(2) 函数，该函数返回一个字符串。但我尝试在字符串上使用 parseFloat() (在从服务器返回之前和之后)。

reverseSort 是我的 Controller 中的一个 bool 值，在单击列名称时设置。

orderByField 是一个字符串值，其设置方式与 reverseSort 类似。

对于@Loren，他要求提供 JSON 返回的服务器代码(它是 Typescript):

        for(let row of rows){
            row.percentage= parseFloat(((row.prop1/ (row.prop2 + row.prop1))* 100).toFixed(2));
        }

Answer 1

使用 Angulars $filter('orderBy') 您可以按对象属性排序，在本例中为“百分比”。请参阅https://docs.angularjs.org/api/ng/filter/orderBy

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

app.controller("myCtrl", function($scope, $http, $window, $timeout, $filter) {
	$scope.percentages = [
		{percentage: 8.82}, 
		{percentage: 0.00}, 
		{percentage: 11.36}, 
		{percentage: 21.88}, 
		{percentage: 25.74}, 
		{percentage: 22.22}
	];


	$scope.sort = function(click) {
		if(click == true) {
			$scope.percentages = $filter('orderBy')($scope.percentages, 'percentage');
		}
                else {
                        $scope.percentages = $filter('orderBy')($scope.percentages, 'percentage', true);
                }
	}

});

.header:hover {
  cursor: pointer;
  
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table class='SO' ng-init='clicked = false'>
	<tbody>
		<tr>
			<th class='header' ng-click='clicked = !clicked; sort(clicked);'>Percentage Failed</th>
		</tr>
		<tr ng-repeat="data in percentages">
			<td>{{data.percentage}}</td>
		</tr>
	</tbody>
</table>

</div>