Question

AngularJS orderBy filter在使用orderBy : 'rate'时无法正常工作，其余date和product正常工作

(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>

Answer 1

属性rate是一个字符串，因此orderBy : 'rate'将它们排序为字符串（完全正常）。

如果要对它们进行正确排序，则应删除费率值周围的引号（因此它们将按数字排序）。

像这样：

{ product: 'mollit anim', date: '3-Noveber-2014', rate: 45.00 }

另外，请移除0中的06.54。

http://jsfiddle.net/ruytehtc/（相同的HTML，已移除的引号和引导0）

Answer 2

你可以试试这个......

<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-November-2014', rate:0.99},
        { product: 'do eiusmod', date: '2-November-2014', rate:4.001},
        { product: 'magna aliqua', date: '16-February-2014', rate:6.54},
        { product: 'exercitation', date: '30-November-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-November-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-November-2014', rate:34.05},
        { product: 'mollit anim', date: '3-November-2014', rate:45.00}
    ]
});
})();
</script>
</head>

你只需用这个数组改变你的数组就可以了。

AngularJS orderBy过滤器无法使用货币

2 个答案: