如何在ng repeat中对JSON数据进行排序
How to sort JSON data in ng-repeat?
我得到一个服务器响应,并使用ng repeat将这些数据绑定到视图。现在我想按priceList
和name
对这些数据进行排序。我可以使用orderBy
对名称进行排序,但不能使用priceList
。我想根据priceList
对产品进行排序。按名称排序会改变列表的顺序,而按priceList
排序只会影响每个category
的products
的顺序。它将影响显示类别的顺序。请帮我解决这个问题
我的代码:
<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 = '';
Fiddle:Fiddle
您可能需要定义一个非常好的分类器函数,或者在ng-repeat
解释products
之前对其进行排序。我使用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
BTW:你直接调用val[0]
,这是非常危险的,如果产品不包含任何元素,你的代码就会崩溃。我的代码不会;-)
更新1
作者要求我提供一个更纯粹的Angular方式解决方案。
这是我的答案:我认为我的解决方案正是以Angular的方式。通常你可以实现一个过滤器(类似于orderBy
)来包装我的sortByPrice
。为什么我不这么做,因为你有ng-click
来切换你的订单过滤器。我宁愿把控制逻辑放在控制器中,而不是放在视图中。当您的项目不断增长时,这将更难维护。
更新2
好吧,为了让+50
有价值,这是你想要的过滤器版本,(用我的大脑编译器键入)请查看fiddle
您需要在其他结构中组织产品。例如:
$.each($scope._JSON[0].categories , function( i , e) {
$.each(e.itemTypeResults, function(sub_i,sub_e) {
$.each(sub_e.products, function(itemTypeResults_i,product) {
console.log(product);
var aProduct = new Object();
aProduct.priceList = product[0].priceList;
aProduct.name = e.name;
$scope.products.push(aProduct);
});
} )
});
代码不是很友好,但我所做的是将所有产品放入一个数组中,这样就可以按价格订购。你有分类内的产品,所以这就是为什么angular是按每个类别的价格订购的。
Fiddle:http://jsfiddle.net/7rL8fof6/1/
希望能有所帮助。
你的小提琴更新了:http://jsfiddle.net/k5fkocby/2/
基本上:1.将复杂的json对象挖掘成一个平面的对象列表:
var productsToShow = [];
for (var i=0; i < json[0].categories.length; i++){
var category = json[0].categories[i];
for (var j=0; j<category.itemTypeResults.length;j++){
var item = category.itemTypeResults[j];
var products = item.products;
for (var productIndex in products) {
var productItems = products[productIndex];
for (var k=0; k<productItems.length;k++){
var productItem = productItems[k];
// Additions:
productItem.categoryName = category.name;
productItem.partTerminologyName = item.partTerminologyName;
productItem.position = item.position;
productsToShow.push(productItem);
}
}
}
}
仅在需要时显示类别标题:
ng repeat="product in(sortedProducts=(productsToShow|orderBy:谓词)"
和
ng-show="sortedProducts[$index - 1].partTerminologyName != product.partTerminologyName"
您可以从数据库中进行排序,并获得最终的JSON数据。。
db.categories.aggregate([{$group : {category : {your condition} }, price: {$sort : { price: 1 } },}}])
- 对角度数据表中括号内的数字进行排序
- 对损坏的子行进行排序的数据表
- 数据表排序但对行进行分组
- 角度未排序数据
- 数据表通过分析一列的值对其进行排序
- 排序数据表
- 对d3堆叠条形图的数据进行排序
- 如何对JQuery Handlebar生成的数据进行排序
- 数组数据排序类似mysql查询
- 使用JQuery对子表数据排序
- 数据排序应该在客户端还是服务器上完成
- a不同列列表的未定义或空引用的数据排序错误
- 日历数据排序 json 树
- 如何在ng-repeat中使用嵌套对象将数据排序为angular js中的JSON数据
- 使用knockout.js与json数据排序列表
- 如何突出显示页面上数据排序类型的菜单项
- dojox.grid.EnhancedGrid中的数据排序
- 在循环值时对JSON数据排序
- 帮助将DIV中的属性数据排序捕获为数组?Jquery/Javascript
- 如何从属性创建数组'数据排序'使用显示的所有分区的Jquery