排序值 - angularJS

Question

我有一個這樣的對象：

$scope.phones = new Object(); 
$scope.phones['id1'] = { 
    "name":"Phone Name1", 
    "dateReleased":"2012-1-09 15:48:24" 
}; 
$scope.phones['id2'] = { 
    "name": "Phone Name2", 
    "dateReleased":"2012-3-12 15:32:11" 
}; 
$scope.phones['id3'] = { 
    "name": "Phone Name3", 
    "dateReleased":"2012-2-10 13:53:32" 
}; 

我顯示該使用ngRepeat。我無法通過dateReleased訂購。此外，反向排序不起作用。我ngRepeat看起來這樣的：

<li ng-repeat="phone in phones | orderBy:dateReleased:true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

Answer 1

如果你檢查它說，在排序依據的表達可以是功能，一個串或陣列的documentation。因此，你需要dateReleased是一個字符串：'dateReleased'

你還需要你的手機對象是一個真正的數組。

嘗試：

$scope.phones = [{ 
     "name":"Phone Name1", 
     "dateReleased":"2012-1-09 15:48:24" 
    },{ 
     "name": "Phone Name2", 
     "dateReleased":"2012-3-12 15:32:11" 
    },{ 
     "name": "Phone Name3", 
     "dateReleased":"2012-2-10 13:53:32" 
    }]; 

<li ng-repeat="phone in phones | orderBy:'dateReleased':true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

Answer 2

首先，你要明白，ng:filter和使用數組（項目的有序集合）ng:orderBy工作，但是你想使用它們的對象（項目_un_ordered集合）。一種可能的方法是將所有對象收集到一個數組中，然後在其上繼續執行ng-repeat。就像這樣：

<ul ng-init="phones = [ 
     {name:'Phone Name 1', dateReleased:'2011-1-09 15:48:24'} 
    , {name:'Phone Name 2', dateReleased:'2012-3-12 15:32:11'} 
    , {name:'Phone Name 3', dateReleased:'2012-2-10 13:53:32'}]; 
    pred = '-dateReleased';" > 
    <li ng-repeat="phone in phones | orderBy:pred"> 
     <p>{{phone.name}}</p> 
     <p>{{phone.dateReleased}}</p> 
    </li> 
</ul> 

Answer 3

兩個其他的答案讓你中途有，但不是所有的方式......

你需要創建你的範圍函數轉換對象這樣一個數組：

$scope.phonesArray = function() { 
    var result = []; 
    angular.forEach($scope.phones, function(phone, id) { 
     result.push(phone); 
    }); 
    return result; 
}; 

然後你會打電話來，與其在ngRepeat你的對象：

<li ng-repeat="phone in phonesArray() | orderBy:'dateReleased':true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

另請注意，'dateReleased'是一個字符串，所以它知道$ eval該字符串關閉當前項目，否則會檢查父目錄$ scope.dateReleased，它不存在。

Here is a plunk for what I think you're trying to do

編輯：您也可以「轉換」的對象數組並將其存儲在$範圍，如果你擔心的功能，這樣做太「貴」，但不應該這不是一個問題，因爲你正在爲一個用戶開發一個客戶端應用程序，而不是許多用戶的服務器應用程序，這意味着你有一個「昂貴」的小擺動空間。 （它不會反正）

Answer 4

雖然ngRepeat可以迭代一個哈希對象，如$scope.phones在你的例子中，內置的orderBy過濾器將不起作用。我相信這是由於存儲對象的方式。正如其他人所指出的那樣，您需要將散列轉換爲數組。雖然您可以使用上述建議的方法來做到這一點，但我更願意使用自定義過濾器來完成此操作。這給了我不必直接修改我的哈希值的好處，也讓我重複使用其他哈希值的過濾器。

yourApp.filter('orderObjectBy', function() { 
    return function(items, field, reverse) { 
    var filtered = []; 
    angular.forEach(items, function(item) { 
     filtered.push(item); 
    }); 
    filtered.sort(function (a, b) { 
     return (a[field] > b[field] ? 1 : -1); 
    }); 
    if(reverse) filtered.reverse(); 
    return filtered; 
    }; 
}); 

此過濾器將對象轉換爲標準數組，並按照您指定的字段進行排序。您可以使用與orderBy完全相同的orderObjectBy過濾器，包括字段名稱後面的布爾值以指定是否應該顛倒順序。換句話說，false正在升序，true正在降序。

<li ng-repeat="phone in phones | orderObjectBy:'dateReleased':true"> 
    <p>{{phone.name}}</p> 
    <p>{{phone.dateReleased}}</p> 
</li> 

關於此主題，我有一個post on my blog。