orderBy不能在HTML div中工作

我正在嘗試在div中實現ng-repeat功能。爲此，我需要首先對數據進行排序（根據其具有的排名，由對象提供），然後將其命名爲div。所以我創建了自定義OrderBy函數。我的分類功能運作良好。不過，我總是得到div的順序是一樣的。（事實上，與我需要的完全相反）。我嘗試了使用反向功能，但它不起作用。orderBy不能在HTML div中工作

我排序的代碼如下所示：

var res = {   
     "Toyota": 2, 
     "Ford": 1, 
     "Chrysler": 4, 
     "Hyundai": 3, 
     "Nissan": 5 
}; 

sortedVal = Object.keys(res).sort(function (a, b){ 
    return res[a] - res[b]; 
});

我的HTML DIV看起來像這樣，

<div class="card" ng-repeat="name in data | orderBy: sortedVal ">

我在控制檯中正確的輸出。但是，無論我做什麼，div都總是按照下面給出的順序排列。

日產，克萊斯勒，現代，豐田，福特。

我需要它們的順序是：福特，豐田，現代，克萊斯勒，日產。

注意：不要擔心「數據名稱」部分，它運作良好。我遇到了「OrderBy」的問題。

來源

2015-06-10 thehydrogen

sortedVal不是一個函數。這是調用Object.keys（res）.sort（...）的結果：鍵值的排序數組 –

在這種情況下，我如何通過** orderBy **傳遞它？ – thehydrogen

您必須將sortedVal添加到控制器範圍，然後它將在視圖中可用。

var res = {   
     "Toyota": 2, 
     "Ford": 1, 
     "Chrysler": 4, 
     "Hyundai": 3, 
     "Nissan": 5 
}; 

$scope.sortedVal = Object.keys(res).sort(function (a, b){ 
    return res[a] - res[b]; 
});

或者您可以創建一個自定義過濾器來按值排序對象。像這樣的東西。

的Html

<div class="card" ng-repeat="(key, value) in data | orderObjectByValue"> 
     {{key}} {{value}} 
</div>

的js

app.filter('orderObjectByValue', function() { 
    return function(items) { 
    var filtered = Object.keys(items).sort(function (a, b){ 
     return items[a] - items[b]; 
    }); 
    return filtered; 
    }; 
});

演示http://plnkr.co/edit/jdIf9hjiUrR6la02aVjA?p=preview

來源

2015-06-10 18:41:51 ShankarSangoli

** sortedVal **給我正確的順序。 ** orderBy **沒有給我想要的結果。在我的情況下，我需要同時使用orderBy和ng-repeat，因爲我從兩個不同的來源獲取數據，一個用於數據，一個用於排名。 – thehydrogen

AngularJS排序依據過濾器不只是支持數組 - 沒有對象。所以你必須寫一個自己的小型過濾器。請通過以下撥弄它可以幫助你

http://jsfiddle.net/4tkj8/1/

來源

2015-06-10 18:43:05 ReeganLourduraj

我認爲** orderBy **正在工作。這只是給我不正確的結果。那麼，它可能是因爲我不知道的其他東西而工作？ – thehydrogen

orderBy要麼需要一個對象的屬性或者定義爲了一個函數的字符串。所以他們不需要自己計算sortedVal，你只需要給orderBy用於計算sortedVal方法：

$scope.orderFn = function(a, b) { 
    return res[a] - res[b] 
} 

<div ng-repeat="name in data | orderBy: orderFn"></div>

Plunker：http://plnkr.co/edit/lOeblx28wjAV4RCVRxwq?p=preview

來源

2015-06-10 19:19:59 Numyx

orderBy不能在HTML div中工作

回答

相關問題