Angular JS：使用orderby与选择标记选定的值

我试图订购一张订单细节表。从选择标签的下拉列表中选择要排序的属性。Angular JS：使用orderby与选择标记选定的值

这两个属性是订单ID和产品数量，我从控制器功能中获得。

功能：

$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结果绑定到选择值？

来源

2016-08-02 Einat Lugassy

你的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' 让你的产品数是这样的：enter code here

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

这里是一个Plunker。让我知道这是不是你需要的。

来源

2016-08-02 18:52:27

我已经与该foreach概念工作，它的工作，但我仍然不能dynamiclly更改属性排序。我的选择看起来很像你的例子，我可以通过prodCount属性来定购它。出于某种原因，它只会选择prodCount选项。 –

检查您的数据。 Id字段必须与数据中的Id字段完全拼在一起。如果您的数据字段被称为'Id'或'ID'，'id'将不起作用。 –

疗法是用你的方法有问题：orderByAttr应该像id属性名称的值，订单ID和name，如果它是你的项目已有的属性。由于计数是生成的属性，我建议你使用功能排序：

$scope.customOrder = function (order) { 
    if (orderByAttr === 'id') { 
    return order.id; 
    } else { 
    return $scope.countProducts(order); 
    } 
};

而且您的选择应该是这样的：

<select ng-model="orderByAttr"> 
    <option ng-value="'id'">id</option> 
    <option ng-value="'count'">products count</option> 
</select>

来源

2016-08-02 18:21:08 fodma1

Angular JS：使用orderby与选择标记选定的值

回答

相关问题