基於AngularJS的過濾與排序

2021-09-22 13:30:30 字數 1139 閱讀 3128

首先,如果要是先查詢過濾,就要使用到angularjs中的 過濾器filter 了。

直接在表示式的後面使用管道命令符 | ,按照下面的寫法就可以達到乙個過濾的效果:

}
通過使用filter實現過濾操作,query是查詢過濾時輸入的字串。

類似地,使用orderby就可以實現排序的功能:

}
上面的查詢以及排序涉及到兩個變數,query和order。在這裡直接使用ng-model實現資料的繫結即可:

search:sort by:

name

age

angularjs是一門基於dom的框架語言,因此不需要實現任何的***以及事件觸發器,當query所在的輸入框發生任何改變時,就會觸發輸入框與下面的表示式展現的雙向重新整理!

相比於其他的一些框架,是基於字串通過dom節點innerhtml新增到dom中,angularjs的實現方式加快了模型與檢視的展現。並且減少了大量不必要的***啊觸發器啊之類的**的編寫,真正實現了類似spring的效果~

資料的展現,可以通過ng-repeat實現。當網頁解析到ng-repeat的時候,會為每乙個陣列中的元素都轉殖乙份標籤,進行編譯解析。

剩下的工作就是需要在script中進行perons陣列的初始化:

...

最後貼上全部的**:

search:

sort by:

name

age

使用結果:

在預設情況下,使用age進行排序:

通過選擇則可以使用name排序

再輸入字元的時候,會自動過查詢過濾掉一些選項

AngularJs的過濾器

所謂過濾器就是過濾得到自己想要的資料 currency 格式化數字為貨幣格式。filter 從陣列項中選擇乙個子集。lowercase 格式化字串為小寫。orderby 根據某個表示式排列陣列。uppercase 格式化字串為大寫。uppercase 過濾器將字串格式化為大寫 divng contr...

angular貨幣過濾 AngularJS 過濾器

1 uppercase,lowercase 大小寫轉換 結果 lower cap string 結果 tank is good 2 date 格式化 2017 03 22 13 52 25 3 number 格式化 保留小數 4 currency貨幣格式化 結果 250.00 結果 rmb 250....

angularjs過濾器的學習

1.ng內建了一些過濾器,它們是 currency 貨幣 date 日期 filter 子串匹配 匹配屬性值中含有a的 匹配屬性值中含有4的 引數是物件,匹配name屬性中含有i的 引數是函式,指定返回age 4的 json 格式化json物件 json過濾器可以把乙個js物件格式化為json字串,...