在 Angular 中實現(xiàn)搜索關(guān)鍵字高亮示例
在 Angular 中,我們不應(yīng)該試圖直接修改 DOM 的內(nèi)容,當(dāng)需要更新 DOM 內(nèi)容的時候,應(yīng)該修改的其實是我們的數(shù)據(jù)模型,也就是 $scope 中的數(shù)據(jù),Angular 會幫助我們將修改之后的數(shù)據(jù)展示在頁面中。
但是,在有些情況下,比如我們有一個搜索框,希望將搜索的關(guān)鍵字在正文中高亮出來,這時候就會感覺比較吃力了,filter 可以幫助我們處理這種情況。
實際上,很多時候,我們的數(shù)據(jù)是不能直接輸出到 DOM 中的,典型的比如日期,或者貨幣等等,通常需要將我們內(nèi)部的數(shù)據(jù)格式化之后,再輸出到頁面中,在 Angular 中,這個工作就是通過 filter 來實現(xiàn)的。
filter 是 module 級別的服務(wù),定義之后,可以在整個 module 內(nèi)直接使用,有著極高的復(fù)用性。
為了說明問題,先回顧一下的 走進(jìn)AngularJs(七) 過濾器(filter) 說明一下過濾器,然后詳細(xì)說明如何處理搜索關(guān)鍵字高亮問題。你可以直接從自定義過濾器部分開始。
1. 過濾器的用法
1. 模板中使用
我們可以直接在{{}}中使用filter,跟在表達(dá)式后面用 | 分割,語法如下:
{{ expression | filter }}
也可以多個filter連用,上一個filter的輸出將作為下一個filter的輸入。
{{ expression | filter1 | filter2 | ... }}
filter可以接收參數(shù),參數(shù)用 : 進(jìn)行分隔。
{{ expression | filter:argument1:argument2:... }}
除了對{{}}中的數(shù)據(jù)進(jìn)行格式化,我們還可以在指令中使用filter,例如先對數(shù)組array進(jìn)行過濾處理,然后再循環(huán)輸出:
<span ng-repeat="a in array | filter ">
2. 在 controller 和 service 中使用
我們的js代碼中也可以使用過濾器,方式就是我們熟悉的依賴注入,例如我要在controller中使用currency過濾器,只需將它注入到該controller中即可。
app.controller('testC',function($scope,currencyFilter){ $scope.num = currencyFilter(123534); }
在模板中使用{{num}}就可以直接輸出 $123,534.00了!在服務(wù)中使用filter也是同樣的道理。
此時你可能會有疑惑,如果我要在controller中使用多個filter,難道要一個一個注入嗎,這豈不太費勁了?小兄弟莫著急~ng提供了一個$filter服務(wù)可以來調(diào)用所需的filter,你只需注入一個$filter就夠了,使用方法如下:
app.controller('testC',function($scope,$filter){ $scope.num = $filter('currency')(123534); $scope.date = $filter('date')(new Date()); }
2. 內(nèi)置的 filter
1. currentcy, 使用currency可以將數(shù)字格式化為貨幣,默認(rèn)是美元符號,你可以自己傳入所需的符號
{{num | currency : '¥'}}
2. date, 原生的js對日期的格式化能力有限,ng提供的date過濾器基本可以滿足一般的格式化要求。
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
3. filter, 注意了,這個過濾器的名字叫 filter,不要搞混了。用來處理一個數(shù)組,然后可以過濾出含有某個子串的元素,作為一個子數(shù)組來返回??梢允亲址?dāng)?shù)組,也可以是對象數(shù)組。如果是對象數(shù)組,可以匹配屬性的值。它接收一個參數(shù),用來定義子串的匹配規(guī)則。
$scope.childrenArray = [ {name:'kimi',age:3}, {name:'cindy',age:4}, {name:'anglar',age:4}, {name:'shitou',age:6}, {name:'tiantian',age:5} ];
自定義的輔助函數(shù)。
$scope.func = function(e){return e.age>4;}
使用 filter 過濾器
{{ childrenArray | filter : 'a' }} //匹配屬性值中含有a的 {{ childrenArray | filter : 4 }} //匹配屬性值中含有4的 {{ childrenArray | filter : {name : 'i'} }} //參數(shù)是對象,匹配name屬性中含有i的 {{childrenArray | filter : func }} //參數(shù)是函數(shù),指定返回age>4的
4. json, 格式化 json 對象。json過濾器可以把一個js對象格式化為json字符串。作用就和我們熟悉的JSON.stringify()一樣。
{{ jsonTest | json}}
5. limitTo, limitTo過濾器用來截取數(shù)組或字符串,接收一個參數(shù)用來指定截取的長度。只能從數(shù)組或字符串的開頭進(jìn)行截取
{{ childrenArray | limitTo : 2 }} //將會顯示數(shù)組中的前兩項
6. lowercase, 轉(zhuǎn)換為小寫。把數(shù)據(jù)轉(zhuǎn)化為全部小寫。
7. uppercase, 轉(zhuǎn)換為大寫。
8. number, 格式化數(shù)字。number過濾器可以為一個數(shù)字加上千位分割,像這樣,123,456,789。同時接收一個參數(shù),可以指定小float類型保留幾位小數(shù):
{{ num | number : 2 }}
9. orderBy 排序,orderBy過濾器可以將一個數(shù)組中的元素進(jìn)行排序,接收一個參數(shù)來指定排序規(guī)則,參數(shù)可以是一個字符串,表示以該屬性名稱進(jìn)行排序??梢允且粋€函數(shù),定義排序?qū)傩?。還可以是一個數(shù)組,表示依次按數(shù)組中的屬性值進(jìn)行排序(若按第一項比較的值相等,再按第二項比較),
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age屬性值進(jìn)行排序 <div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函數(shù)的返回值進(jìn)行排序 <div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name進(jìn)行排序
3. 自定義 filter
我們先定義個沒有參數(shù)的過濾器。第一個例子來自 Angular 官方的文檔。
我們希望檢查數(shù)據(jù)是否為真,如果為真的話,顯示為一個 ✓ ,否則的話,顯示為 ✘, 在 Unicode 中,\u2713 -> ✓, \u2718 -> ✘,所以,我們需要做的就是檢查數(shù)據(jù)是否為真,然后轉(zhuǎn)化為這兩個特殊字符進(jìn)行輸出。
app.filter('checkmark', function() { return function(input) { return input ? '\u2713' : '\u2718'; }; });
過濾器還可以有參數(shù),比如內(nèi)置的過濾器可以格式話貨幣或者日期。
在過濾器后面,使用冒號 (:) 分隔的就是過濾器的參數(shù),在過濾器中,可以獲取這個參數(shù),如果有多個參數(shù),就繼續(xù)使用冒號 (:) 進(jìn)行分隔,所以,過濾器可以有多個參數(shù)。
下面實現(xiàn)一個截斷超長字符串的過濾器。
app.filter("truncate", function(){ return function(text, length){ if (text) { var ellipsis = text.length > length ? "..." : ""; return text.slice(0, length) + ellipsis; }; return text; } });
4. 定義高亮 filter
我們希望搜索的關(guān)鍵字在正文中高亮出來,正文就是過濾器的第一個參數(shù),第二個參數(shù)就是搜索關(guān)鍵字,這樣,我們的過濾器將會有兩個參數(shù)了。
高亮的原理很簡單,將需要高亮的內(nèi)容使用 span 標(biāo)記隔離出來,再加上一個特殊的 class 進(jìn)行描述就可以了。
app.filter("highlight", function($sce, $log){ var fn = function(text, search){ $log.info("text: " + text); $log.info("search: " + search); if (!search) { return $sce.trustAsHtml(text); } text = encodeURI(text); search = encodeURI(search); var regex = new RegExp(search, 'gi') var result = text.replace(regex, '<span class="highlightedText">$&</span>'); result = decodeURI(result); $log.info("result: " + result ); return $sce.trustAsHtml(result); }; return fn; });
$sce, 和 $log 是 angular 提供的兩個服務(wù),其中 $sce 服務(wù)需要使用 ngSanitize 模塊。關(guān)于這個模塊,可以參考:angular-ngSanitize模塊-$sanitize服務(wù)詳解
5. 定義服務(wù)對象
我們的頁面可能很復(fù)雜,需要在一個控制器中輸入關(guān)鍵字,但是,需要在多個控制器中使用這個關(guān)鍵字進(jìn)行過濾,怎么處理呢?使用服務(wù)可以解決這個問題。
在 Angular 中,服務(wù)就是一個單例對象,我們使用 factory 可以直接定義一個服務(wù)對象。
app.factory("notifyService", function(){ var target = { search:"key" }; return target; });
在需要使用這個對象的地方,直接注入就可以獲取這個對象了。
6. 定義搜索 Controller
在搜索控制器中,我們希望用戶提供搜索關(guān)鍵字。為了方便檢查,我們順便將用戶的輸入展示出來。
<div ng-controller="tools"> <div> <input type="text" ng-model="notify.search" value=""/> </div> <div> {{notify.search}} </div> </div>
控制器的實現(xiàn),我們將服務(wù)對象直接注入到控制器中,然后綁定到當(dāng)前的 $scope 上,以便在當(dāng)前控制器中實現(xiàn)綁定。
app.controller("tools", function($scope, notifyService){ $scope.notify = notifyService; });
現(xiàn)在,我們可以直接輸入搜索關(guān)鍵字,這個關(guān)鍵字將被保存到服務(wù)對象中,可以在當(dāng)前的 module 中的各個控制器中訪問這個服務(wù)對象。
7. 在內(nèi)容 Controller 中使用 filter
現(xiàn)在,我們已經(jīng)有了過濾器,也可以直接通過服務(wù)對象來獲取搜索關(guān)鍵字,現(xiàn)在組合起來就可以使用了。text 中是我們的正文內(nèi)容。
<div ng-controller="search"> <div ng-bind-html="text | highlight:notify.search"> </div> </div>
下面再看看 highlight 和 notify.search 來自何方。
app.controller("search", function($scope, $log, notifyService){ $scope.text = "hello, world. hello, world. hello, world."; $scope.notify = notifyService; })
為了在當(dāng)前控制器中使用搜索關(guān)鍵字,關(guān)鍵是在搜索關(guān)鍵字發(fā)生變化的時候,還需要自動更新,我們將服務(wù)對象綁定到當(dāng)前的 $scope 中,這是引用的名稱為 notify.
這樣,在復(fù)雜頁面中,我們可能存在多個控制器,在每個需要高亮的控制器中,我們只需要注入服務(wù)對象,就可以直接獲取到當(dāng)前的搜索關(guān)鍵字,配合使用過濾器,就可以直接實現(xiàn)全局高亮了。
8. 總結(jié)
結(jié)合過濾器和服務(wù)對象,我們實現(xiàn)了在復(fù)雜頁面中,對整個頁面中的內(nèi)容進(jìn)行關(guān)鍵字高亮。以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular中Lazy Loading懶加載陷阱避坑最佳實踐
這篇文章主要為大家介紹了Angular中Lazy Loading懶加載陷阱避坑最佳實踐,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10AngularJS實用基礎(chǔ)知識_入門必備篇(推薦)
下面小編就為大家?guī)硪黄狝ngularJS實用基礎(chǔ)知識_入門必備篇(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJs提供的嚴(yán)格上下文轉(zhuǎn)義服務(wù)$sce與$sceDelegate,文中介紹的很詳細(xì),有需要的朋友們可以參考借鑒。2016-09-09