javascript – 如何排序ng重複的JSON資料？

我正在收到一個伺服器響應,並繫結這些資料以使用ng-repeat進行檢視.現在我想通過priceList和name對這些資料進行排序.我可以使用orderBy排序名稱,但不能使用priceList.我想根據priceList對產品進行排序.按名稱排序會改變列表的順序,而按SortList排序只會影響每個類別的產品順序.它將影響顯示類別的順序.請幫我解決這個問題.

我的程式碼：

<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 = '';

小提琴：ofollow,noindex" target="_blank">Fiddle

您可能需要定義一個非常好的分揀機功能,或者在產品被ng-repeat解釋之前進行排序.我使用underscore.js(或lodash)建立了分揀機功能.

您可以檢查demo (或更新的demo ).產品首先按類別排序,然後按每個類別的價格排序.

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

BTW：你直接呼叫val [0],這是非常危險的,如果產品不包含任何元素,你的程式碼將中斷.我的程式碼不會;-)

更新1

作者要求我提供一個更純粹的角度解決方案.

這是我的答案：我認為我的解決方案是正確的.通常你可以實現一個過濾器(類似於orderBy),它包裝我的sortByPrice.為什麼我不這樣做,因為您已經點選滑鼠來切換訂單過濾器.我寧願將控制邏輯放在一個控制器中,而不是把檢視放在一塊.當您的專案不斷增長時,這將更難維護.

更新2

好的,為了使這50個值得,這裡是你想要的過濾器版本(用我的大腦編譯器輸入)請檢查fiddle