使用過濾器

2022-07-22 04:09:12 字數 4301 閱讀 5038

過濾器在資料從作用域傳遞到指令上時進行轉換,但並不改變源資料,這允許在檢視中顯示時能夠靈活地格式化或者轉換資料。

angularjs具有兩種型別的內建過濾器:一類是對單個資料進行操作的,另一類是對資料集合進行操作的。

用於單個資料的內建過濾器

currency 對貨幣值進行格式化,在過濾器名之後新增冒號:,然後新增乙個字串表示想替換成的符號,比如英鎊符號。

date 對日期值進行格式化,這個日期可以是字串,js日期物件或者毫秒數等等。使用這個過濾器時,需要指定過濾器名date,之後跟乙個冒號,再然後是乙個格式化字串,由要顯示的各個日期成分組成。如data|date:"dd mmm yy"或者 data|date:"shortdate".shortdate是date過濾器的格式字串,這是date過濾器所支援的常用日期表示式的幾個快捷格式之一。快捷格式字串表見p340.

json 從js物件建立json字串,例如data|json。

number 對數字值進行格式化,調整小數字數,根據需要進行四捨五入。應用這個過濾器時,只需使用豎線符號和過濾器名,然後是乙個冒號和要顯示的小數字數,number過濾器會自動在千分位處插入逗號。data|number:2 保留兩位小數

uppercase/lowercase 將字串格式化為全部大寫或者全部小寫,例如data|uppercase.

本地化過濾器輸出

currency、number和date過濾器都支援使用本地化規則對資料進行格式化,規則定義在本地化檔案中。

2.1 限制專案數量limitto

limitto過濾器可以限制從乙個資料物件構成的陣列中取出的專案的數量,這在乙個僅能容納一定數量專案的頁面中尤為有用。

limitto過濾器配置為乙個整數,例如data|limitto:5,過濾器會從陣列中選出最前5個物件。如果你選擇乙個負數,例如data|limitto:-5,過濾器會從陣列中選出最後五個物件。

如果你指定了乙個大於陣列大小的數值,limitto過濾器將會返回陣列中所有物件。

2.2 選取項filter

filter過濾器用於從陣列中選出一些物件。選取條件可以指定為乙個表示式,或者乙個用於匹配屬性值的map物件,或者乙個函式。

例如data|filter:,通過map物件進行選取,指定了想要選取的物件必須是category屬性為fish的。

如果你通過乙個函式過濾,選出的專案將會是那些使得函式執行結果返回true的。

$scope.selectitems=function

(item)

<

tr ng-repeat

="p in products

|filter:selectitems"

>

tr>

在本例中,定義了乙個名為selectitems的作用域行為。這個行為將會依次呼叫集合中的每個項,並按照順序返回每個物件。

2.3 對專案進行排序 orderby

使用如下: 這裡price需要加引號,如果不加引號,orderby會失敗,會假設你想使用乙個名為price的作用域變數或者控制器變數,並且認為你將會在某處著手定義這個變數。

1)設定排序方向

在只設定乙個屬性名的情況下,相當於隱式地請求過濾器為物件進行公升序排列,可以通過顯式地使用+或-字元來設定排序順序。在屬性名前加入乙個負號字首(-),就指定了應該按照降序排列物件,字首指定為正號(+)或者不指定字首,則具有公升序排列的效果。

2)使用函式排序

之所以需要小心的將屬性名指定為字串的原因是因為orderby過濾器也能夠使用乙個函式進行排序,也就是說允許不直接按照某個屬性值的方式進行排序。用於排序的函式需傳入乙個資料陣列中的物件,然後返回乙個在排序時用於比較的物件或值。

<

tr ng-repeat

="p in products | orderby:mycustomsorter"

>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td class

="text-right"

>}

td>

tr>

$scope.mycustomsorter = function

(item)

這個函式的效果是,在公升序排序下凡是具有較小expiry值的那些項將被放在資料陣列的前端。

3)用多個謂語進行排序

可以配置orderby過濾器為乙個屬性名或函式名構成的陣列,用於依次進行排序。如果兩個物件對於陣列中的第乙個屬性或者函式具有相同的值,然後orderby過濾器就會考慮使用第二個值或函式,依次繼續下去直到能夠對資料物件分出次序,或者嘗試完所有的屬性/函式。

<

tr ng-repeat

="p in products | orderby:[mycustomsorter, '-price']"

>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td class

="text-right"

>}

td>

tr>

過濾器通過豎線(|)符號鏈式連線在一起,並按照所寫下的順序執行計算。

<

tr ng-repeat

="p in products | orderby:[mycustomsorter, '-price'] | limitto: 5"

>

先執行orderby,然後再執行limitto

4.1 建立格式化資料值的過濾器

過濾器是由module.filter方法建立的,該方法接收兩個引數:待建立的過濾器名稱和乙個工廠函式。

.filter("labelcase", function

()

else

};});

工人函式接收兩個引數:第乙個是待過濾的值(在應用過濾器時由angularjs提供),第二個引數用於允許過濾器用途被顛倒過來,也就是首字母為小寫而剩餘其他字母為大寫。

引入過濾器檔案的script元素要放在定義模板的檔案後面,因為js檔案中的**依賴於已經被定義的這個模板。

<

tr ng-repeat

="p in products | orderby:[mycustomsorter, '-price'] | limitto: 5"

>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td class

="text-right"

>}

td>

tr>

4.2 建立乙個集合過濾器

.filter("skip", function

()

else

} else

}});

<

tr ng-repeat

="p in products | skip:2 | limitto: 5"

>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td class

="text-right"

>}

td>

tr>

這裡傳給skip過濾器的data的是整個陣列物件,而不是陣列中的某乙個物件。

4.3 在已有的過濾器上搭建新的過濾器

.filter("take", function

($filter)

});

<

tr ng-repeat

="p in products | take:2:5"

>

<

td>}

td>

<

td>}

td>

<

td>}

td>

<

td class

="text-right"

>}

td>

tr>

這是第一次使用乙個worker函式需要多於乙個配置引數的過濾器,可以看到為這些引數提供值時使用冒號將他們進行分割的。

常用過濾器

去除空格 type 1 所有空格 2 前後空格 3 前空格 4 後空格 function trim value,trim 任意格式日期處理 使用格式 等 function formadate value,fmt if y test fmt fmt fmt.replace regexp.1 date....

jq常用過濾器 jquery 過濾器

1.基本選擇器 基本選擇器是jquery中最常用的選擇器,也是最簡單的選擇器,它通過元素id class 和標籤名來查詢dom元素。這個非常重要,下面的內容都是以此為基礎,逐級提高的。1 id 獲取id指定的元素,id是全域性唯一的,所以它只有乙個成員。2 class 獲取class指定的元素,不同...

django 常用過濾器

1 add 使用形式為 意義 將value的值增加2 也可以是字串拼接 2 upper 轉換乙個字串為大寫形式 3 lower 使用形式 意義 將乙個字串轉換成小寫形式 3 capfirst 使用形式為 意義 value的第乙個字元轉化成大寫形式 4 cut 使用形式為 例如,如果value是 st...