angularJs中filter的用法及api解釋
angularJs飽受廣大開發者歡迎,除了其依賴注入,雙向繫結的思想,directive指令,filter過濾器也極大的提高了開發效率,程式碼更加優雅,維護起來也更加方便。比如,上傳,列印,排序,流程等只需一個指令,並繫結相應的變數即可實現,根本不需要後臺同事編寫JS,好的指令,不僅可複用,可拓展,還得可以維護。指令用的蠻多了,就不贅述,今天談談它的好基友,filter過濾器。angularJS的過濾器非常強大,一個filter能瞬間format時間的格式,貨幣,數字,以及自定義過濾器對目標陣列進行過濾。
過濾器使用起來也很簡單,直接上栗子:
<div class="search-project" >
<h4 class="text-muted text-thin">選擇專案</h4>
<input type="text" class="form-control" placeholder="請輸入專案名稱" ng-model="query">
</div>
<ul class="nav" >
<li ng-repeat="project in projectItems | filter:query">
<a class="media-box p mt0" ng-click ="selectProject(project);">
<span class="media-box-body">
<span class="media-box-heading">
<i class="fa fa-map-marker"></i> {{project.projectName}}
</span>
</span>
</a>
</li>
</ul>
瞭解過ng的朋友,一眼就能明白,在input裡的ng-model=‘query’就是雙向繫結的變數。而下邊的ng-repeat=”project in projectItems | filter:query”,首先就是遍歷projectItems這個陣列,而filter就是依據query這個欄位進行過濾。
可是在js的controller裡怎麼取得projectItems根據query的過濾結果呢,先給出api地址,
上邊給出了兩種寫法,一種是html模板裡用過濾器,也就是例子中那種用法,還有一種是在js裡用filter,正好!!!
//在html模板裡
{{ filter_expression | filter : expression : comparator : anyPropertyKey}}// 這裡的filter_expression可以理解為source Array
//在js controller裡
$filter('filter')(array, expression, comparator, anyPropertyKey)
這裡每個引數的意義也給一下簡單的解釋
引數 | 型別 | 詳解 |
---|---|---|
array | array | 目標陣列 |
expression | string,object,function | 用於篩選目標陣列,1.當是字串時,用於匹配目標array的內容,目標數組裡所有帶有字串的陣列及物件將會與此字串進行匹配,matched的將會返回。巢狀結構的資料也會進行匹配,但是帶有’!’字首的將會忽略。2.當是物件時,用於過濾array陣列的特定屬性。例如,{name:”M”,phone:”1”}將會返回帶有name值為M和phone值為1的array項。只匹配屬性名可用(舉例{$:’text’})來選取帶有text屬性的物件及巢狀物件。帶有‘!’字首的將會忽略,例如{name:”!M”},將會返回一個數組,包括不含M值得name屬性。3.如果是一個function(value,index,array),此函式用於重寫過濾器,可以根據index及value值來自由過濾。 |
comparator | function(actual,expected),true,false | 這個引數用來配置匹配的規則,1.當它是function(act,exp)函式的時候,將會把期望值和實際值哪來比較,並且通過的一定的規則,如果通過則返回true,宣佈matched。2.當他是true的時候,值得是function(actual, expected) { return angular.equals(actual, expected)},也就是必須完全匹配才返回true。3.當它是false的時候,它會尋找一個substring的match,及不必完全匹配,像上邊栗子中包含對應文字就會matched。預設是false |
好了,有了這裡的用法及解釋,就可以寫咯,在controller裡用過
$filter('filter')($scope.projectItems,query)
就可以得到依據query過濾的結果。第一個引數是目標陣列,第二個引數是根據篩選的關鍵詞,第三個引數預設是false,及包含關鍵詞就返回。第四個引數,沒用過。
By the way, 過濾器filter不能用在ng-model裡,ng-model裡必須是個expression,即字串。
<!-- 這種是會報錯的,雖然效果是ok的-->
<input type="text" ng-model="clickRoom.houseSumFacePrice number:2" class="form-control col-sm-8"/>
相關推薦
angularJs中filter的用法及api解釋
angularJs飽受廣大開發者歡迎,除了其依賴注入,雙向繫結的思想,directive指令,filter過濾器也極大的提高了開發效率,程式碼更加優雅,維護起來也更加方便。比如,上傳,列印,排序,流程等只需一個指令,並繫結相應的變數即可實現,根本不需要後臺同事編
八、angularjs 中 filter在controller中的使用--避免多次遍歷
遍歷 lar .com 簡潔 避免 angular -1 con nbsp filter在html頁面的使用司空見慣,比如: filter在controller中使用可以避免多次使用angular.foreach,來進行遍歷。例如: 如果使用filter,則會讓代碼簡潔
【Java學習筆記之二十二】解析接口在Java繼承中的用法及實例分析
ani 復制代碼 ads compute 現在 target body 常量 實現接口 一、定義 Java接口(Interface),是一系列方法的聲明,是一些方法特征的集合,一個接口只有方法的特征沒有方法的實現,因此這些方法可以在不同的地方被不同的類實現,而這些實現可以具
Android開發中XRecyclerview用法及遇到的一些問題
解決 pos sage head ebe 專業 剛才 adapt 只需要 目前通過xrecyclerview的開源代碼來實現系列功能,加載數據傳入type,值為1,2,3,分別表示初次加載,下拉刷新數據,上拉加載更多數據操作,刷新數據只需要重新放入數據,然後notifyDa
Java中compareTo用法及原始碼解析
最近遇到一個問題,在日期比較的時候,很麻煩,因為日期比較沒有大於等於,只有大於或者小於,這就導致在比較時間的時候特別麻煩,而且還要由string轉成date格式才能比較,下面是我使用compareTo比較時間字串的程式碼: String putStartTime = Date
Mysql中Join用法及優化
Join的幾種型別 笛卡爾積(交叉連線) 如果A表有n條記錄,B表有m條記錄,笛卡爾積產生的結果就會產生n*m條記錄。在MySQL中可以為CROSS JOIN或者省略CROSS即JOIN如 SELECT * FROM table1 CROSS JOIN table2&
FastJson中JSONObject用法及常用方法總結
SON協議使用方便,越來越流行,JSON的處理器有很多,這裡我介紹一下FastJson,FastJson是阿里的開源框架,被不少企業使用,是一個極其優秀的Json框架,Github地址: FastJson FastJson對於json格式字串的解析主要用到了下面三個類: 1.JSON:f
linux中 export 用法及環境變數
Linux export命令用於設定或顯示環境變數。 在shell中執行程式時,shell會提供一組環境變數。export可新增,修改或刪除環境變數,供後續執行的程式使用。 一、語法如下: export [-fnp][變數名稱]=[變數設定值] 引數說明: -f 代表[
Java中foreach用法及常用集合操作
foreach語句是java5的新特徵之一,在遍歷陣列、集合方面,foreach為開發人員提供了極大的方便。 foreach語句是for語句的特殊簡化版本,但是foreach語句並不能完全取代for語句,然而,任何的foreach語句都可以改寫為for語句版本。 for
C#中keybd_event 用法及鍵碼參照
Windows提供了一個模擬鍵盤API函式Keybd_event(),該函式能觸發一個按鍵事件,也就是說會產生一個WM_KEYDOWN或WM_KEYUP訊息。 [DllImport("user32.dll", EntryPoint = "keybd_event")] pu
Map.Entry()中entryset()用法及Map遍歷
Map map=new HashMap();Iterator it=map.keySet().iterator();Object key;Object value;while(it.hasNext()){key=it.next();value=map.get(key);System.out.println(k
EXCEL 中自定義函式的應用(關於 XOR 在 EXCEL 中的用法 及 文字型數字求和)
EXCEL 中,能否同調用內建函式一樣在工作表中呼叫自已製作的自定義函式,出現對話方塊.同時也能做到像內建函式對話方塊裡的說明?答案是肯定的,下面舉例說明:題目: ①對文字型一系列數字進行求和(SUM()返回0) ②對數值型的一系列數字異或操作(EX
angularJS中filter(過濾器)的使用
filter時angular開發經常接觸的一個內容,今天在wiki中做一個補全,說一下filter的使用 首先,filter分為angularJS中封裝好的filter和自定義filter 自定義的filter包括以下: 1.currency(貨幣處理),預設是美元符
(轉自MSDN)InternetExplorer.Application的用法及屬性解釋
using System; using System.Collections.Generic; using System.Text; namespace ConsoleApplication1 { class EventHandlers { public void OnBe
Linux中yum和apt-get用法及區別
記錄 auto yum安裝軟件 mirror 內核 epo 綁定 提示 們的 Linux中yum和apt-get用法及區別 一般來說著名的linux系統基本上分兩大類: 1.RedHat系列:Redhat、Centos、Fedora等 2.Debian系列:De
springboot中filter的用法
改變 pll code row logs ini 作用 onf 我們 一、在spring的應用中我們存在兩種過濾的用法,一種是攔截器、另外一種當然是過濾器。我們這裏介紹過濾器在springboot的用法,在springmvc中的用法基本上一樣,只是配置上面有點區別。 二、f
angularjs中是否選擇所有和$filter過濾orderBy排序
class spl clas tran 列表 -c derby 過濾 elf HTML代碼: <table class="table table-bordered table-list table-striped no-margin-bottom"> &l
(轉)輕松掌握shell編程中數組的常見用法及示例
分享 shell編程 內容 就是 linu 迷糊 常見 /etc/ med 緣起:在老男孩進行linux培訓shell編程教學中,發現不少水平不錯的網友及同學對數組仍然很迷糊,下面就給大家分享下數組的用法小例子,希望能給大家一點幫助。其實SHELL的數組很簡單,好用。我們學
javascript中filter的用法
prim 字符串 name div map() 結果 gpo 多個參數 null filter filter也是一個常用的操作,它用於把Array的某些元素過濾掉,然後返回剩下的元素。 和map()類似,Array的filter()也接收一個函數。和map()不同的是,f
Python中,While循環語句的用法及註意事項
pen bubuko 縮進 .com 對比 出錯 lag spl 處的 今天跟著老師學習了While語句的用法,聽老師講的時候是聽明白了,感覺好簡單,但是自己做一遍的時候出了好多處的錯誤。我犯的錯誤都是新手常犯的,因此我覺得有必要把這次記錄下來,提醒自己也提醒跟我一樣的小白