使用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>运行效果：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 使用Angularjs过滤器如何实现动态搜索. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1657
14
1415
52
1309
25
1257
29
1231
24
Bagaimana untuk mengisih foto mengikut tarikh yang diambil dalam Windows 11/10
Feb 19, 2024 pm 08:45 PM
Artikel ini akan memperkenalkan cara mengisih gambar mengikut tarikh penangkapan dalam Windows 11/10, dan juga membincangkan perkara yang perlu dilakukan jika Windows tidak menyusun gambar mengikut tarikh. Dalam sistem Windows, menyusun foto dengan betul adalah penting untuk memudahkan anda mencari fail imej. Pengguna boleh mengurus folder yang mengandungi foto berdasarkan kaedah pengisihan yang berbeza seperti tarikh, saiz dan nama. Selain itu, anda boleh menetapkan tertib menaik atau menurun mengikut keperluan untuk menyusun fail dengan lebih fleksibel. Cara Isih Foto mengikut Tarikh Diambil dalam Windows 11/10 Untuk mengisih foto mengikut tarikh yang diambil dalam Windows, ikut langkah berikut: Buka Gambar, Desktop atau mana-mana folder tempat anda meletakkan foto Dalam menu Reben, klik
Cara mengisih e-mel mengikut penghantar, subjek, tarikh, kategori, saiz dalam Outlook
Feb 19, 2024 am 10:48 AM
Outlook menawarkan banyak tetapan dan ciri untuk membantu anda mengurus kerja anda dengan lebih cekap. Salah satunya ialah pilihan pengisihan yang membolehkan anda mengkategorikan e-mel anda mengikut keperluan anda. Dalam tutorial ini, kami akan mempelajari cara menggunakan ciri pengisihan Outlook untuk menyusun e-mel berdasarkan kriteria seperti pengirim, subjek, tarikh, kategori atau saiz. Ini akan memudahkan anda memproses dan mencari maklumat penting, menjadikan anda lebih produktif. Microsoft Outlook ialah aplikasi berkuasa yang memudahkan untuk mengurus jadual e-mel dan kalendar anda secara berpusat. Anda boleh menghantar, menerima dan mengatur e-mel dengan mudah, manakala fungsi kalendar terbina dalam memudahkan untuk menjejaki acara dan janji temu anda yang akan datang. Bagaimana untuk berada di Outloo
Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya
Mar 25, 2024 am 09:36 AM
Apabila mencipta mesin maya, anda akan diminta untuk memilih jenis cakera, anda boleh memilih cakera tetap atau cakera dinamik. Bagaimana jika anda memilih cakera tetap dan kemudian menyedari bahawa anda memerlukan cakera dinamik, atau sebaliknya. Anda boleh menukar satu kepada yang lain? Dalam siaran ini, kita akan melihat cara menukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya. Cakera dinamik ialah cakera keras maya yang pada mulanya mempunyai saiz kecil dan membesar dalam saiz semasa anda menyimpan data dalam mesin maya. Cakera dinamik sangat cekap dalam menjimatkan ruang storan kerana ia hanya mengambil sebanyak mungkin ruang storan hos seperti yang diperlukan. Walau bagaimanapun, apabila kapasiti cakera berkembang, prestasi komputer anda mungkin terjejas sedikit. Cakera tetap dan cakera dinamik biasanya digunakan dalam mesin maya
Cara menggunakan carian lanjutan Baidu
Feb 22, 2024 am 11:09 AM
Cara menggunakan Carian Terperinci Baidu Enjin carian Baidu kini merupakan salah satu enjin carian yang paling biasa digunakan di China. Ia menyediakan pelbagai fungsi carian, salah satunya ialah carian lanjutan. Carian lanjutan boleh membantu pengguna mencari maklumat yang mereka perlukan dengan lebih tepat dan meningkatkan kecekapan carian. Jadi, bagaimana untuk menggunakan carian lanjutan Baidu? Langkah pertama ialah membuka halaman utama enjin carian Baidu. Pertama, kita perlu membuka laman web rasmi Baidu, iaitu www.baidu.com. Ini adalah pintu masuk ke carian Baidu. Dalam langkah kedua, klik butang Carian Terperinci. Di sebelah kanan kotak carian Baidu, terdapat
Bagaimana untuk mencari pengguna di Xianyu
Feb 24, 2024 am 11:25 AM
Bagaimanakah Xianyu mencari pengguna? Dalam perisian Xianyu, kami boleh mencari secara langsung pengguna yang kami ingin berkomunikasi dalam perisian. Tetapi saya tidak tahu cara mencari pengguna. Lihat sahaja di kalangan pengguna selepas mencari. Seterusnya ialah pengenalan yang editor bawa kepada pengguna tentang cara mencari pengguna Jika anda berminat, datang dan lihat! Bagaimana untuk mencari pengguna di Xianyu Jawapan: Lihat butiran di kalangan pengguna yang dicari Pengenalan: 1. Masukkan perisian dan klik pada kotak carian. 2. Masukkan nama pengguna dan klik Cari. 3. Kemudian pilih [Pengguna] di bawah kotak carian untuk mencari pengguna yang sepadan.
Jadual WPS tidak dapat mencari data yang anda cari, sila semak lokasi pilihan carian
Mar 19, 2024 pm 10:13 PM
Dalam era yang dikuasai oleh kecerdasan, perisian pejabat juga telah menjadi popular, dan borang Wps diterima pakai oleh majoriti pekerja pejabat kerana fleksibiliti mereka. Di tempat kerja, kita dikehendaki bukan sahaja untuk belajar membuat borang yang mudah dan memasukkan teks, tetapi juga untuk menguasai lebih banyak kemahiran operasi untuk menyelesaikan tugasan dalam kerja sebenar Laporan dengan data dan menggunakan borang adalah lebih mudah, jelas dan tepat. Pelajaran yang kami bawa kepada anda hari ini ialah: Jadual WPS tidak dapat mencari data yang anda cari. Mengapa sila semak lokasi pilihan carian? 1. Mula-mula pilih jadual Excel dan klik dua kali untuk membukanya. Kemudian dalam antara muka ini, pilih semua sel. 2. Kemudian dalam antara muka ini, klik pilihan "Edit" dalam "Fail" dalam bar alat atas. 3. Kedua, dalam antara muka ini, klik "
Bagaimana untuk mencari kedai di Taobao mudah alih Bagaimana untuk mencari nama kedai
Mar 13, 2024 am 11:00 AM
Perisian aplikasi Taobao mudah alih menyediakan banyak produk yang bagus Anda boleh membelinya pada bila-bila masa dan di mana-mana sahaja, dan semuanya adalah tulen. Anda boleh mencari dan membeli secara bebas mengikut kehendak anda. Bahagian produk dalam kategori yang berbeza semuanya terbuka pengguna menggunakannya untuk kali pertama Jika anda tidak tahu bagaimana untuk mencari produk, sudah tentu anda hanya perlu memasukkan kata kunci dalam bar carian untuk mencari semua hasil produk Anda tidak boleh berhenti membeli-belah editor akan menyediakan kaedah dalam talian terperinci untuk pengguna Taobao mudah alih mencari nama kedai. 1. Mula-mula buka aplikasi Taobao pada telefon bimbit anda,
Bagaimana untuk mengisih markah WPS
Mar 20, 2024 am 11:28 AM
Dalam kerja kami, kami sering menggunakan perisian wps Terdapat banyak cara untuk memproses data dalam perisian wps, dan fungsinya juga sangat berkuasa Kami sering menggunakan fungsi untuk mencari purata, ringkasan, dan sebagainya kaedah yang boleh digunakan untuk data statistik telah disediakan untuk semua orang dalam perpustakaan perisian WPS Di bawah kami akan memperkenalkan langkah-langkah bagaimana untuk mengisih markah dalam WPS Selepas membaca ini, anda boleh belajar daripada pengalaman. 1. Mula-mula buka jadual yang perlu diberi ranking. Seperti yang ditunjukkan di bawah. 2. Kemudian masukkan formula =pangkat(B2, B2: B5, 0), dan pastikan anda memasukkan 0. Seperti yang ditunjukkan di bawah. 3. Selepas memasukkan formula, tekan kekunci F4 pada papan kekunci komputer Langkah ini adalah untuk menukar rujukan relatif kepada rujukan mutlak.
