angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例
更新時(shí)間：2018年08月17日 14:07:36 作者：全棧弄潮兒
這篇文章主要介紹了angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本篇angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例，分享給大家，具體如下：
添加一個(gè)pipe：
import { Pipe, Injectable, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'keyword'
})
@Injectable()
export class KeywordPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(val: string, keyword: string): any {
const Reg = new RegExp(keyword, 'i');
if (val) {
const res = val.replace(Reg, `<span style="color: #81E1B7;">${keyword}</span>`);
console.log(res);
return this.sanitizer.bypassSecurityTrustHtml(res);
}
}
}
注： DomSanitizer，這個(gè)的目的是是數(shù)據(jù)在頁(yè)面上的綁定能夠safe的解析
html中使用方法：
<ion-label [innerHTML]="item.name | keyword:searchText"></ion-label>
注： 在標(biāo)簽里面用新的標(biāo)簽包起來(lái)，不然會(huì)有樣式問(wèn)題； 要用innerHTML來(lái)綁定數(shù)據(jù)。
演示效果
開(kāi)源項(xiàng)目地址：https://github.com/alex-0407/ionic3-awesome
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要講解AngularJS模塊的相關(guān)知識(shí)，這里整理了詳細(xì)的基礎(chǔ)資料，并提供示例代碼和示例實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
Ubuntu系統(tǒng)下Angularjs開(kāi)發(fā)環(huán)境安裝
本文主要介紹 Ubuntu系統(tǒng)下Angularjs開(kāi)發(fā)環(huán)境安裝，這里詳細(xì)介紹了安裝步驟和注意事項(xiàng)，有在Ubuntu 環(huán)境下開(kāi)發(fā)的朋友可以參考下2016-09-09
AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例
這篇文章主要介紹了AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例的相關(guān)資料,希望大家通過(guò)本文實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
angular.js實(shí)現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實(shí)現(xiàn)列表orderby排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngularJS 支付倒計(jì)時(shí)功能實(shí)現(xiàn)思路
這篇文章主要介紹了AngularJS 支付倒計(jì)時(shí)功能的實(shí)現(xiàn)思路,需要的朋友可以參考下2017-06-06
基于datepicker定義自己的angular時(shí)間組件的示例
這篇文章主要介紹了基于datepicker定義自己的angular時(shí)間組件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
將angular-ui的分頁(yè)組件封裝成指令的方法詳解
這篇文章主要給大家介紹了將angular-ui的分頁(yè)組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作覺(jué)有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。2017-05-05
淺談Angular7 項(xiàng)目開(kāi)發(fā)總結(jié)
這篇文章主要介紹了淺談Angular7 項(xiàng)目開(kāi)發(fā)總結(jié)，本文在此做一次遇到問(wèn)題的總結(jié)，以便知識(shí)的掌握，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式，通過(guò)定義一個(gè)共享服務(wù)service來(lái)實(shí)現(xiàn)此功能，對(duì)angularjs共享數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)2016-03-03
這篇文章主要為大家詳細(xì)介紹了AngularJs分頁(yè)插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06