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與選擇標記選定的值

回答

相關問題