使用Angular的orderBy指令进行自定义排序

时间:2014-08-27 11:12:06

标签: javascript angularjs angularjs-orderby

以下是从A到Z的排序标准: 1)特殊字符 2)数字 3)字母

For example:-

$scope.cards = ["815 BRAZOS ST AUSTIN TX 78701","7745 CHEVY CHASE DR AUSTIN TX 78752","701 BRAZOS ST AUSTIN TX 78701","555 ROUND ROCK WEST DR ROUND ROCK TX 78681","400 W 15TH ST AUSTIN TX 78701"]

Expected result after sorting:-

400 W 15TH ST AUSTIN TX 78701
555 ROUND ROCK WEST DR ROUND ROCK TX 78681
701 BRAZOS ST AUSTIN TX 78701
815 BRAZOS ST AUSTIN TX 78701
7745 CHEVY CHASE DR AUSTIN TX 78752

我想使用Angular orderBy过滤器实现此目的。与JS自定义排序函数一样,我们有两个参数,通过操作我们可以返回> 0,< 0和0来实现自定义排序。

我的尝试

<div ng-controller="MyCtrl">
  <ul ng-repeat="card in cards | orderBy:myValueFunction">
      <li>{{card}}</li>
    </ul>
</div>

JS

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

function MyCtrl($scope) {
    $scope.cards = ["815 BRAZOS ST AUSTIN TX 78701","7745 CHEVY CHASE DR AUSTIN TX 78752","701 BRAZOS ST AUSTIN TX 78701","555 ROUND ROCK WEST DR ROUND ROCK TX 78681","400 W 15TH ST AUSTIN TX 78701"]

    $scope.myValueFunction = function(card,card1) {
        console.log(card);
        console.log(card1);
        return card;
    } 
}

JSfiddle link

由于

1 个答案:

答案 0 :(得分:4)

根据documentation,您的函数应返回一个值,该值将用于使用标准比较运算符(&lt;,&gt;,=)进行排序。

因此,在您的情况下,您的函数应该返回一个值,这将决定排序。对于您的情况,您需要使用一些高级逻辑来产生这样的值。

对于简单示例(按第一个数字排序),您得到:

$scope.myValueFunction = function(card) {
        return card.split(' ')[0]|0;
}

至少你会在小样本中得到你所要求的内容,请看这里:http://jsfiddle.net/zjvsu/529/

<强>已更新

如果你想像标准的javascript sort自定义函数那样比较两个值,那么你将不得不使用你自己的过滤器来返回已排序的数组。