javascript - Angular JS : Use orderby with a select tag selected value

Question

我正在尝试订购一份订单详细信息表。 从选择标记的下拉列表中选择排序依据的属性。

这两个属性是订单 ID 和产品数量，这是我从 Controller 函数获得的。

功能:

$scope.countProducts =  function(order){
    var counter = 0;

    order.products.forEach(function(currProd){
    counter += currProd.count;
    });
    return counter;
};

Id 是一个数字变量。

我的观点: 详情表:

<table>
  <thead>
    <tr>
      <!-- a headline row -->
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="order in orders | orderby: orderByAttr">
      <!-- order details rows -->
    </tr>
  </tbody>
</table>

带有选项的选择标签:

<select ng-model="orderByAttr">
  <option ng-value="order.id">id</option>
  <option ng-value="countProducts(order)"> products     count </option>
</select>

如何将选项的值传递给按过滤器排序？ 如何将 countProduct 结果绑定(bind)到选择值？

Answer 1

将 HTML 更改为:

    <div>
    <select ng-model="orderByAttr">
        <option ng-value="'id">id</option>
        <option ng-value="'productCount'">Product Count</option>

    </select>
</div>
<div ng-repeat="order in orders | orderBy: orderByAttr">
    <div>
        <div>{{order.id}}</div>
    </div>
</div>

我不确定您的数据是什么样的，但我认为它与此类似:

$scope.orders = [{
    id: 1,
    products : [{
      productId: 1,
      name: 'Okra'

    },
  {productId: 3,
  name: 'Pear'}]

}, 
{
id: 2,
products : [{
  productId: 2,
  name: 'Apple'
}]
},
{
  id:3,
  products: [{
    productId: 1,
    name: 'Okra'
  }
  ]
}
]

您可以使用“forEach”来获取产品数量，如下所示:在此处输入代码

    angular.forEach($scope.orders, function(value,key){
  $scope.orders[key].productCount = value.products.length;
})

这是一个Plunker 。如果这不是您需要的，请告诉我。