如何在ng-repeat中对JSON数据进行排序？

Question

我正在获取服务器响应并使用ng-repeat将这些数据绑定到视图.现在我想用priceList和排序这些数据name.我可以使用orderBy,但不能使用priceList.我想根据产品进行排序priceList.使用名称排序将改变列表的顺序,而排序priceList依次只会影响products每个列表的顺序category.它将影响显示类别的顺序.请帮我解决这个问题.
我的代码:

<div ng-controller="Ctrl">
    <pre>Sorting predicate = {{predicate}};</pre>
    <hr/>
    <table class="friend">
        <tr>
            <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
            </th>
            <th><a href="" ng-click="predicate = 'priceList'>price</a></th>
        </tr>

    </table>


<div ng-repeat="data in _JSON[0].categories | orderBy:predicate">
       <div ng-repeat="vals in data.itemTypeResults |orderBy:'partTerminologyName'" id="{{vals.partTerminologyName}}">
`<h4 style="background-color: gray">{{vals.partTerminologyName}} : Position :{{vals.position}}</h4>`<br>


<div ng-repeat="val in vals.products">
    <b> Quantity:{{val[0].perCarQty}}</b><br>
    <b> part:{{val[0].partNo}}</b><br>
    <b>sku:{{val[0].sku}}</b><br>
    <b> qtyInStock:{{val[0].qtyInStock}}</b><br>
    <b> priceList:{{val[0].priceList}}</b><br>
    <b>priceSave:{{val[0].priceSave}}</b><br>
    <b> qtyDC:{{val[0].qtyDC}}</b><br>
    <b> qtyNetwork:{{val[0].qtyNetwork}}</b><br>
    <b> priceCore:{{val[0].priceCore}}</b><br>
        </div>
</div>      
    </div>

JS:

$scope._JSON = [
        {"categories":
            [
                {"id":14061,"name":"Drive Belts",
                    "itemTypeResults":[
                        {"partTerminologyName":"Serp. Belt",
                            "position":"Main Drive",
                            "products":{
                                "5060635":[
                                    {"perCarQty":2,"partNo":"5060635",
                                    "sku":"20060904","qtyInStock":2,"qtyNetwork":4,
                                    "qtyDC":6,"priceList":19.15,"priceSave":3.29,
                                    "priceCore":10.0}
                                ],
                                "635K6":[
                                    {"perCarQty":9,"partNo":"635K6",
                                        "sku":"10062449","qtyInStock":2,"qtyNetwork":4,
                                        "qtyDC":6,"priceList":18.15,"priceSave":3.21,"priceCore":10.0}
                                ]
                            }
                        }
                    ]
                },
                {"id":2610,"name":"Drive Belt Tensioners, Idlers, Pulleys & Components",
                    "itemTypeResults":[
                        {"partTerminologyName":"Drive Belt Tensioner Assembly",
                        "position":"N/A",
                            "products":{
                                "950489A":[
                                    {"perCarQty":4,"partNo":"950489A",
                                        "sku":"10150833","qtyInStock":2,"qtyNetwork":4,
                                        "qtyDC":6,"priceList":18.15,"priceSave":3.21,"priceCore":10.0
                                    }
                                ]
                            }},
                        {"partTerminologyName":"Drive Belt Idler Pulley","position":"N/A",
                            "products":{
                                "89161":[
                                    {"perCarQty":1,"partNo":"89161",
                                    "sku":"99995959","qtyInStock":2,"qtyNetwork":4,
                                    "qtyDC":6,"priceList":17.15,"priceSave":3.21,"priceCore":10.0}
                                ],
                                "951373A":[
                                    {"perCarQty":2,"partNo":"951373A","pla":"LTN",
                                    "plaName":"Litens",
                                    "sku":"10150926","qtyInStock":2,"qtyNetwork":4,
                                        "qtyDC":6,"priceList":18.15,"priceSave":3.21,"priceCore":10.0}
                                ]
                            }
                        }
                    ]
                }
            ]
        }
    ];
    $scope.predicate = '';

小提琴:小提琴

Answer 1

您可能需要定义一个非常好的排序器函数，或者products在它们被 解释之前对它们进行排序ng-repeat。我使用 underscore.js （或 lodash）创建了排序器函数。

您可以查看演示（或更新的演示）。产品首先按类别排序，然后按每个类别的价格排序。

<!-- in html -->
<button ng-click="sortFn=sortByPrice">Sort By Price</button>
<button ng-click="sortFn=doNotSort">Do not Sort</button>
...
<div ng-repeat="val in sortFn(vals.products)">
  ...

// in js
$scope.sortByPrice = function(products) {
  return _.sortBy(products, function(product) {
    return product.length > 0 ? product[0].priceList : 0;
  });
};

$scope.doNotSort = function(products) {
  return products;
};

$scope.sortFn = $scope.doNotSort; // do not sort by default

顺便说一句：你直接调用val[0]，这是非常危险的，如果产品不包含任何元素，你的代码将会崩溃。我的代码不会；-)

更新1

作者向我寻求更纯粹的 Angular 方式解决方案。

这是我的答案：我认为我的解决方案正是采用 Angular 方式。通常您可以实现一个过滤器（类似于orderBy）来包装我的sortByPrice. 为什么我不这样做，因为你必须ng-click切换订单过滤器。我宁愿将控制逻辑放入控制器中，而不是将其作为片段放入视图中。当您的项目不断增长时，这将更难维护。

更新2

好的，为了使+50有价值，这是您想要的过滤器版本，（用我的大脑编译器输入）请检查小提琴