angular利用過(guò)濾器實(shí)現(xiàn)前端搜索

前提:列表加載的是全部的數(shù)據(jù)

html:
..........
<!---搜索框-->
 <input type="text" placeholder="請(qǐng)輸入?yún)^(qū)位名稱" class="form-control" ng-model="searchName"/>
..........

..........
<!---列表--->
<ul class="ports">
      <li class="e-t-item" ng-repeat="node in tree|filter:searchName">
            <a class="e-t-title">{{node.name}}</a>
       </li>
</ul>
..........

如圖所示:


filter-demo.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過(guò)事件實(shí)現(xiàn)的。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,691評(píng)論 1 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,817評(píng)論 1 45
  • 你看到了么,藏在心底那枚 永恒閃爍的,白色月亮 那是童年的夢(mèng),是光芒 那是路上的燈塔 那是層層疊疊的迷霧里 微弱卻...
    俞壹閱讀 248評(píng)論 2 7
  • 凋零后的新生,心里苦澀的一點(diǎn)甘甜!雪 笨笨的傻傻的雪。 一個(gè)空曠的空間什么都沒(méi)有,只有一個(gè)簡(jiǎn)單的雪人,它...
    前方的光閱讀 86評(píng)論 0 0
  • 我們?cè)鯓訋椭⒆犹幚砣粘I钪械臎_突以及幫助他們建立良好的情緒管理能力? 基于愛(ài)去行動(dòng),而非怕。 生活的一切都是美...
    銀杏家園閱讀 318評(píng)論 0 1

友情鏈接更多精彩內(nèi)容