angular中的orderBy過濾器使用

一  orderBy過濾器

 

AngularJS中orderBy進行排序，第一個參數可以有三種類型，分別為：function,string,array:

 

第一種:function,如果是function,那么function函數會遍歷待排序的數組，並將返回的結果作為angular庫函數中comparator的參數，進行比較排序。

 

第二種：如果是字符串，假如待排序的數組為對象，那么將會按照待排序數組中的每個對象的對應屬性值，進行排序。如果字符串前邊加有“+”，“-”符號，那么+表示升序排序，-表示降序排序。如果字符串為空，那么將按照元素自身進行排序。

 

第三種：如果是array,那么是第二種情況的一種多屬性排序方式 。比如參數為[a,b],那么將先按照a屬性值進行排序，如果a屬性值相同，那么將按照b屬性值進行排序。

 

如何利用orderBy,實現簡單元素數組的排序，需要利用orderBy的第一參數為function的這種類型：定義function 為：

 

$scope.sortSimpleType(op){

     return op;

}

 

在頁面中的代碼為：字符串數組排序

<div>

    {{['test','bob','market','type','barrow'] | orderBy: sortSimpleType}}

</div>

 

排序結果為：

 

 ["barrow","bob","market","test","type"]

 

數字數組排序:

 

<div>

    {{[1,3434,2,1,12121,6,56,3] | orderBy: sortSimpleType}}

</div>

 

排序結果為：

 

[1,1,2,3,6,56,3434,12121]

當然了，參數類型為function的orderBy過濾器，也可以用來對元素為對象的數組進行排序。只要在函數中返回對象的屬性值即可。

例如，

 

<div>

    {{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: sortObjectType}}

</div>

$scope.sortObjectType = function(obj){

   return obj['name']

}

排序結果為：

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}]

 

對於這種需要按照對象屬性進行排序，可以采用orderBy參數類型為string的方式，這樣可以充分利用angular的排序特性，對於上述的例子可以改為：

<div>

    {{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: 'name'}}

</div>

 

//排序結果為：

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}].

 

 

針對多屬性的排序，采用第三種策略，參數為array類型,如：

 

<div>

    {{[{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}]] | orderBy:[ 'name','age']}}

</div>

 

//排序結果為：

 

[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]

 

到此orderBy的使用介紹已經結束。那么orderBy在angular內部是怎么實現的排序了，需要再次深入對angular的代碼做出分析。