2014-09-27 69 views
1

我正在使用Angular Filter插件根據「Row」參數將tr分組到表中。angular.filter插件中的orderby filter似乎無法正確排序

下面的代碼,根據行值

<tbody> 
     <tr ng-repeat="row in data |groupBy: 'Row' | orderBy : 'Row'"> 
      <td ng-repeat="person in row">{{person.Row}}.{{person.Label}}</td>  
     </tr> 
</tbody> 

但第10和第11項出現在第二和第三排,而不是構建Tr的。 我該如何解決這個問題?

Plnkr:http://plnkr.co/edit/GaW4XsAwlDkFs61VXkOl?p=preview

回答

1

orderBy必須鏈中的最後一個過濾器(當您應用過濾器時r到另一個過濾器的結果)。 但是,groupBy返回一個對象,並且orderBy期望數組作爲參數。
所以,你可以做這樣的事情:

JS:

$scope.groups = [ 
    { category: 'alpha', id: 2 }, 
    { category: 'beta', id: 3 }, 
    { category: 'gamma', id: 0 }, 
    { category: 'alpha', id: 4 }, 
    { category: 'beta', id: 5 }, 
    { category: 'gamma', id: 1 } 
    ]; 
    // retrieves the min 'id' of a collection, used for the group ordering. 
    // you can use Agile.js instead. e.g: _.min(arr, 'id') 
    $scope.min = function(arr) { 
    return $filter('min') 
     ($filter('map')(arr, 'id')); 
    } 

HTML:

<ul ng-repeat="group in groups | groupBy:'category' | toArray:true | orderBy:min"> 
    <!-- print the group name --> 
    <li>{{ group.$key }}</li> 
    <!-- iterate over the group members and order each group by id --> 
    <li ng-repeat="item in group | orderBy:'id'"> 
     {{ item }} 
    </li> 
</ul> 

結果:

  • 伽馬
    • { 「類別」: 「伽馬」, 「ID」:0}
    • { 「類別」: 「伽馬」, 「ID」:1}
  • 阿爾法
    • { 「類別」: 「阿爾法」, 「ID」:2}
    • { 「類別」: 「阿爾法」, 「標識」:4}
  • 測試
    • { 「類別」: 「測試」, 「標識」:3}
    • { 「類別」: 「測試」, 「標識」:5}
+1

感謝您更新信息 – user1184100 2014-11-16 08:01:59

0

這是因爲行號被作爲字符串處理:

看看這兩個帖子:

Angular orderBy number sorting as text in ng-repeat

AngularJS orderby integer field not working properly

+0

如果是這樣的話,那麼如何只有第10,11行受到影響?順便說一句,它已經在json中的整數格式。 – user1184100 2014-09-27 18:53:15

+1

顯然有一個groupBy它否決orderBy的問題,例如,如果您在Label之後分組,它將在Label之後進行排序。如果您不使用groupBy,那麼在我刪除| groupBy:'Row'的情況下,訂單就沒有問題 – golfNintyNine 2014-09-27 19:50:02

+0

,沒有任何東西顯示在td中,它是空的 – user1184100 2014-09-27 19:55:32