2014-07-21 68 views
16

我的對象是這樣的:按訂單

students = {name: 'Aa_Student', class: 'A_Class'}, 
      {name: 'Ab_Student', class: 'A_Class'}, 
      {name: 'Ac_Student', class: 'B_Class'}, 
      {name: 'Ba_Student', class: 'B_Class'}, 
      {name: 'Bb_Student', class: 'C_Class'}, 
      {name: 'Bc_Student', class: 'C_Class'} 

比方說,學生對象洗牌。我用ng-repeat顯示數據。我想按自定義順序排序對象。

例如,我要顯示這樣的數據:

Name    Class 
----------------------------- 
Ac_Student   B_Class 
Ba_Student   B_Class 
Aa_Student   A_Class 
Ab_Student   A_Class 
Bb_Student   C_Class 
Bc_Student   C_Class 

所以基本上,我想通過學生的班級訂購,但它B_Class至上,然後A_Class,然後C_Class。另外,我想按學生的姓名按字母順序排列。我怎樣才能做到這一點?

HTML:

<table> 
    <tr ng-repeat="student in students | orderBy:customOrder"> 
    ... 
    </tr> 
</table> 

控制器:

$scope.customOrder = function(student) { 
    $scope.students = $filter('orderBy')(student, function() { 

    }); 
}; 
+1

有兩種方法可以做到這一點(1)自定義過濾器(2)短數據在控制器級 – dhavalcengg

+0

@dhavalcengg所以我需要使用過濾器? –

+1

注意'$ scope.studens'中的拼寫錯誤(缺少t) – Gamb

回答

19

嗨,你可以創建自定義排序來過濾請看這裏http://jsbin.com/lizesuli/1/edit

HTML:

<p ng-repeat="s in students |customSorter:'class'">{{s.name}} - {{s.class}} </p> 
     </div> 

angularjs過濾器:

app.filter('customSorter', function() { 

    function CustomOrder(item) { 
    switch(item) { 
     case 'A_Class': 
     return 2; 

     case 'B_Class': 
     return 1; 

     case 'C_Class': 
     return 3; 
    } 
    } 

    return function(items, field) { 
    var filtered = []; 
    angular.forEach(items, function(item) { 
     filtered.push(item); 
    }); 
    filtered.sort(function (a, b) {  
     return (CustomOrder(a.class) > CustomOrder(b.class) ? 1 : -1); 
    }); 
    return filtered; 
    }; 
}); 
+1

這正是我正在尋找的。謝謝。 –

+2

你好,'angular.forEach(items,function(item){ filtered.push(item); });'這段代碼對我來說看起來沒有必要,是不是足夠說'var filtered = items; – codtex

-1

設置orderBy爲對象的屬性只是引用該標記中的屬性名稱:

ng-repeat="student in students |orderBy:'name' | orderBy:'class'" 

DEMO

+0

謝謝,但我想命令B_Class先走。這不是字母順序。 –

10

知道這是舊的,但可能會派上用場其他...

您也可以創建一個簡單的自定義排序功能。 「不完全過濾器」:

$scope.customOrder = function (item) { 
     switch (item) { 
      case 'A_Class': 
       return 2; 

      case 'B_Class': 
       return 1; 

      case 'C_Class': 
       return 3; 
     } 
    }; 

然後使用像你想:

<table> 
<tr ng-repeat="student in students | orderBy:customOrder"> 
... 
</tr>