使用Angularjs過濾器如何實現動態搜尋
這篇文章主要介紹了Angularjs過濾器實現動態搜尋與排序功能,涉及AngularJS過濾器相關搜尋、查詢、排序操作技巧,需要的朋友可以參考下
本文實例講述了Angularjs過濾器實作動態搜尋與排序功能。分享給大家供大家參考，具體如下：
利用angularjs實現動態的插入以及利用過濾器進行資料的搜尋以及排序.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>www.jb51.net AngularJS过滤器测试</title>
</head>
<body ng-controller="app">
<table>
<tr>
<td ng-click="sort('name')">姓名</td>
<td ng-click="sort('age')">年龄</td>
</tr>
<tr ng-repeat="arr1 in arr1">
<td>{{arr1.name}}</td>
<td>{{arr1.age}}</td>
</tr>
</table>
<input id="wei" type="text" ng-focus="concentrate()" >
<input type="button" ng-click="search()" value="搜索">
</body>
<script src="angular.min.js"></script>
<script src="jquery.js"></script>
<script>
// var wei = document.getElementById("wei");
// console.log(wei);
// setTimeout(function(){
// $("#wei").attr("disabled",false);
// },3000);
var m=angular.module("myApp",[]);
m.controller("app",["$scope","$filter",function($scope,$filter){
var arr=[
{"name":"猪","age":20},
{"name":"小猪","age":23},
{"name":"大猫","age":227},
{"name":"老虎","age":29},
{"name":"中虎","age":29},
{"name":"老虎","age":39},
{"name":"老猫","age":47},
{"name":"熊猫","age":29},
{"name":"树懒","age":27},
{"name":"狮子","age":59}
];
$scope.arr1=arr;
//实现查询功能
var isopen=true;
$scope.sort=function(str){
$scope.arr1=$filter("orderBy")($scope.arr1,str,isopen);
isopen=!isopen;
//console.log(isopen);
};
$scope.concentrate=function(){
console.log("已聚焦");
}
//实现查询功能
$scope.search=function(){
console.log(11);
$scope.arr1=$filter("filter")(arr,document.getElementById("wei").value);
}
}]);
</script>
</html>運行效果：
以上是使用Angularjs過濾器如何實現動態搜尋的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Windows 11/10中按拍攝日期對照片進行排序
Feb 19, 2024 pm 08:45 PM
本文將介紹如何在Windows11/10中根據拍攝日期對圖片進行排序，同時探討如果Windows未按日期排序圖片應該如何處理。在Windows系統中，合理整理照片對於方便尋找影像檔案至關重要。使用者可以根據不同的排序方式（如日期、大小和名稱）來管理包含照片的資料夾。此外，還可以根據需要設定升序或降序排列，以便更靈活地組織文件。如何在Windows11/10中按拍攝日期對照片進行排序要按在Windows中拍攝的日期對照片進行排序，請執行以下步驟：打開圖片、桌面或放置照片的任何資料夾在功能區選單中，單
如何在Outlook中按寄件者、主題、日期、類別、大小對電子郵件進行排序
Feb 19, 2024 am 10:48 AM
Outlook提供了許多設定和功能，可協助您更有效地管理工作。其中之一是排序選項，可讓您根據需要對電子郵件進行分類。在這個教學中，我們將學習如何利用Outlook的排序功能，根據寄件者、主題、日期、類別或大小等條件對電子郵件進行整理。這將讓您更輕鬆地處理和查找重要訊息，提高工作效率。 MicrosoftOutlook是一個功能強大的應用程序，可以輕鬆地集中管理您的電子郵件和日曆安排。您可以輕鬆地發送、接收和組織電子郵件，而內建的日曆功能也讓您能夠輕鬆追蹤您即將面臨的活動和約會。如何在Outloo
將VirtualBox固定磁碟轉換為動態磁碟，反之亦然
Mar 25, 2024 am 09:36 AM
在建立虛擬機器時，系統會要求您選擇磁碟類型，您可以選擇固定磁碟或動態磁碟。如果您選擇了固定磁碟，後來意識到需要動態磁碟，或者相反，該怎麼辦?好!你可以把一種轉換成另一種。在這篇文章中，我們將看到如何將VirtualBox固定磁碟轉換為動態磁碟，反之亦然。動態磁碟是一種虛擬硬碟，它最初具有較小的大小，隨著您在虛擬機器中儲存數據，其大小會相應增長。動態磁碟在節省儲存空間方面非常高效，因為它們只佔用所需的主機儲存空間。然而，隨著磁碟容量的擴展，可能會稍微影響電腦的效能。固定磁碟和動態磁碟是虛擬機器中常用的
百度進階搜尋怎麼用
Feb 22, 2024 am 11:09 AM
百度高級搜尋怎麼用百度搜尋引擎是目前中國最常用的搜尋引擎之一，它提供了豐富的搜尋功能，其中之一就是進階搜尋。進階搜尋可以幫助使用者更精確地搜尋到所需的信息，提高搜尋效率。那麼，百度高級搜尋要怎麼使用呢？第一步，打開百度搜尋引擎首頁。首先，我們需要開啟一個百度的官方網站，也就是www.baidu.com。這是百度搜索的入口。第二步，點選進階搜尋按鈕。在百度搜尋框的右側，有
閒魚怎麼搜尋用戶
Feb 24, 2024 am 11:25 AM
閒魚怎麼搜尋用戶？在軟體閒魚中，我們可以直接在軟體裡面去找想要溝通的使用者。但卻不清楚該怎麼搜尋用戶。在搜尋後的用戶中查看即可。接下來就是小編為用戶帶來的搜尋用戶方式介紹的介紹，有興趣的用戶快來一起看看吧！閒魚怎麼搜尋用戶答：在搜尋後的用戶中查看詳情介紹：1、進入軟體，點選搜尋框。 2、輸入使用者名稱，點選搜尋。 3.再選擇搜尋框下的【用戶】，即可找到對應用戶了。
wps表格找不到正在搜尋的資料,請檢查搜尋選項位置
Mar 19, 2024 pm 10:13 PM
智能為主導的時代，辦公室軟體也普及開來，Wps表格由於它的靈活性被廣大的辦公室人員採用。在工作上要求我們不只是要學會簡單的表格製作和文字輸入，我們要掌握更多的操作技能，才能完成實際工作中的任務，有數據的報表，運用表格更方便更清楚更準確。今天我們帶給大家的課程是：wps表格找不到正在搜尋的資料,為什麼請檢查搜尋選項位置？ 1.先選取Excel表格，雙擊開啟。然後在該介面中，選取所有的儲存格。 2、然後在該介面中，點選頂部工具列裡「檔案」裡的「編輯」選項。 3、其次在該介面中，點選頂部工具列裡的“
手機淘寶怎麼搜尋店鋪 搜尋店舖名的方法
Mar 13, 2024 am 11:00 AM
手機淘寶app軟體內提供的商品好物非常多，隨時隨地想買就買，而且件件都是正品，每一件商品的價格標籤一清二楚，完全沒有任何的複雜操作，享受更加便捷的購物樂趣。隨心所欲自由搜尋選購，不同品類的商品板塊都是開放的，添加個人的收貨地址以及聯絡電話，方便快遞公司聯繫到你，實時查看最新的物流動態，那麼有些新人用戶第一次使用它，不知道如何搜尋商品，當然只需要在搜尋欄輸入關鍵字就能找到所有的商品結果，自由選購根本停不下來，現在小編在線詳細為手機淘寶用戶們帶來搜尋店鋪名的方法。 1.先打開手機淘寶app,
wps怎麼排序成績高低
Mar 20, 2024 am 11:28 AM
在我們的工作中，常常會用到wps軟體，wps軟體處理資料的方式方法是非常多的，而且函數功能也是非常強大的，我們常用函數來求平均值，求總和等，可以說只要是統計數據能用的方法，wps軟體庫裡都已經為大家準備好了，下面我們要介紹的是wps怎麼排序成績高低的操作步驟，看完以後大家可以藉鑑經驗。 1.先開啟需要排名的表格。如下圖所示。 2、然後輸入公式＝rank（B2，B2：B5，0），一定要輸入0。如下圖所示。 3、輸入完公式以後，按下電腦鍵盤上的F4鍵，這一步驟操作是為了讓相對引用變成絕對引用。
