Question

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

category

JS：

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

小提琴：Fiddle

Answer 1

您可能需要定义一个非常好的排序功能，或者在products解释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]，这是非常危险的，如果产品不包含任何元素，你的代码就会中断。我的代码赢了< - t; - ）

更新1

作者要求我提供更纯粹的Angular方式解决方案。

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

更新2

好的，为了使+50值得，这里是您想要的过滤器版本，（使用我的大脑编译器输入）请检入fiddle

Answer 2

您需要在其他结构中组织产品。例如：

 $.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);  
        });

      } )

    });

代码不是很友好，但我所做的是将所有产品放在一个阵列中，以便按价格订购。您有类别内的产品，这就是为什么角度按每个类别的价格排序。

小提琴： http://jsfiddle.net/7rL8fof6/1/

希望它有所帮助。

Answer 3

您的小提琴已更新：http://jsfiddle.net/k5fkocby/2/

基本上： 1.将复杂的json对象消化为一个平面的对象列表：

long

仅在需要时显示类别标题：

ng-repeat =＆＃34;产品（sortedProducts =（productsToShow | orderBy：predicate））＆＃34;

和

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);          
        }
    }    
    } 
}

Answer 4

您可以从数据库中排序并获取最终的JSON数据..

CalenderDayButton

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

4 个答案: