【 js 框架 Angular 】价格排序（angularJs版）

今天刚写完价格排序，趁着脑子还记得，就记录一下。难倒是不难，但是有坑。
用的方法是  sort()。

坑：

如果有分页，那么请将排序的函数写在你从后台查询数据的函数里。如果写在外面，获取 ng-repeat 出来的 list ，那么就会导致它只排当前那一页的序，也就是100个 li ，分 10 页，排序函数写在外面，那么就只排某页的 10 个 li 价格的序。所以要写在含有 从后台调过来的 100 个 li 的函数里，对 100 个 li 进行排序。

这里不再模拟数据了，写出个大概意思，理解万岁。

假设 result 是你从后台调取过来的 数据结果。它的样子 console 出来之后有可能是这样的：

然后 JS 核心代码如下：

if(result){
    $scope.dataList = result.data; 

    var count = true;  
    $scope.sortPrice = function(){
        if(count){      
            $scope.currentPage = 0;     
                $scope.dataList  =  $scope.dataList.sort(function(a,b) {  return parseFloat(a.destPrice) - parseFloat(b.destPrice)});
            count = false;
        }else{
            $scope.currentPage = 0;     
            $scope.dataList = $scope.dataList.sort(function(a,b) { return parseFloat(b.destPrice) - parseFloat(a.destPrice)});
            count=true;
        }
    }
}

第 4 行设置的 count 的作用：点击 奇数次 为 从小到大 排序，点击 偶数次 为从大到小 排序。 解释：未点击时，设置其为 true，为 true 时点击为顺序，然后将其值设为 false，当为 false 的时候，如果被点击，则倒序，然后再将其设置为 true。

然后 5-15 行就是我们的排序代码。解释如下： 如果 count 为 true 时，则执行 7-9 行代码，先将当前页码返回到第一页，也就是第 7 行的作用，然后将排好序的新的列表再赋值给 $scope.dataList。具体排序 用的原型就是 someThing.sort(function(a,b){return a -b}); 其中 a.destPrice 和 b.destprice 的 destprice 是我从后台请求过来的数据中价格参数，换成你的价格参数就好了。

执行完以上代码，你的 ng-repeat 就会按照新的 dataList 去刷新列表。

<li ng-repeat="r in dataList">

最后再将 count 设置为 false，这样下一次点击的时候，就是按照 11-13 行执行倒序代码，道理一样的。

 

进行收尾，在你的价格上绑上 ng-click 事件。

 <a href="javascript:void(0)" ng-click="submitViewSearch()">价格</a>

 

done。