首先,如果要是先查詢過濾,就要使用到angularjs中的 過濾器filter 了。
直接在表示式的後面使用管道命令符 | ,按照下面的寫法就可以達到乙個過濾的效果:
}通過使用filter實現過濾操作,query是查詢過濾時輸入的字串。
類似地,使用orderby就可以實現排序的功能:
}上面的查詢以及排序涉及到兩個變數,query和order。在這裡直接使用ng-model實現資料的繫結即可:
search:sort by:angularjs是一門基於dom的框架語言,因此不需要實現任何的***以及事件觸發器,當query所在的輸入框發生任何改變時,就會觸發輸入框與下面的表示式展現的雙向重新整理!name
age
相比於其他的一些框架,是基於字串通過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字串,...