How to implement dynamic search using Angularjs filter
This article mainly introduces the dynamic search and sorting functions of Angularjs filters, involving AngularJS filter-related search, query, and sorting operation skills. Friends in need can refer to the following
The examples in this article describe Angularjs filtering The device implements dynamic search and sorting functions. Share it with everyone for your reference, the details are as follows:
Use angularjs to implement dynamic insertion and use filters to search and sort data.
<!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>
Operation effect:
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement automatic flash kill clicks on web pages in JS (detailed tutorial)
How to implement http small in node Crawler
About Http request principle in angular2 (detailed tutorial)
What problems are likely to occur when using VueAwesomeSwiper?
How to use Node.js crawler to implement web page requests
The above is the detailed content of How to implement dynamic search using Angularjs filter. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

This article will introduce how to sort pictures according to shooting date in Windows 11/10, and also discuss what to do if Windows does not sort pictures by date. In Windows systems, organizing photos properly is crucial to making it easy to find image files. Users can manage folders containing photos based on different sorting methods such as date, size, and name. In addition, you can set ascending or descending order as needed to organize files more flexibly. How to Sort Photos by Date Taken in Windows 11/10 To sort photos by date taken in Windows, follow these steps: Open Pictures, Desktop, or any folder where you place photos In the Ribbon menu, click

Outlook offers many settings and features to help you manage your work more efficiently. One of them is the sorting option that allows you to categorize your emails according to your needs. In this tutorial, we will learn how to use Outlook's sorting feature to organize emails based on criteria such as sender, subject, date, category, or size. This will make it easier for you to process and find important information, making you more productive. Microsoft Outlook is a powerful application that makes it easy to centrally manage your email and calendar schedules. You can easily send, receive, and organize email, while built-in calendar functionality makes it easy to keep track of your upcoming events and appointments. How to be in Outloo

When creating a virtual machine, you will be asked to select a disk type, you can select fixed disk or dynamic disk. What if you choose fixed disks and later realize you need dynamic disks, or vice versa? Good! You can convert one to the other. In this post, we will see how to convert VirtualBox fixed disk to dynamic disk and vice versa. A dynamic disk is a virtual hard disk that initially has a small size and grows in size as you store data in the virtual machine. Dynamic disks are very efficient at saving storage space because they only take up as much host storage space as needed. However, as disk capacity expands, your computer's performance may be slightly affected. Fixed disks and dynamic disks are commonly used in virtual machines

How does Xianyu search for users? In the software Xianyu, we can directly find the users we want to communicate with in the software. But I don’t know how to search for users. Just view it among the users after searching. Next is the introduction that the editor brings to users about how to search for users. If you are interested, come and take a look! How to search for users in Xianyu? Answer: View details among the searched users. Introduction: 1. Enter the software and click on the search box. 2. Enter the user name and click Search. 3. Select [User] under the search box to find the corresponding user.

How to use Baidu Advanced Search Baidu search engine is currently one of the most commonly used search engines in China. It provides a wealth of search functions, one of which is advanced search. Advanced search can help users search for the information they need more accurately and improve search efficiency. So, how to use Baidu advanced search? The first step is to open the Baidu search engine homepage. First, we need to open Baidu’s official website, which is www.baidu.com. This is the entrance to Baidu search. In the second step, click the Advanced Search button. On the right side of the Baidu search box, there is

In the era dominated by intelligence, office software has also become popular, and Wps forms are adopted by the majority of office workers due to their flexibility. At work, we are required not only to learn simple form making and text entry, but also to master more operational skills in order to complete the tasks in actual work. Reports with data and using forms are more convenient, clear and accurate. The lesson we bring to you today is: The WPS table cannot find the data you are searching for. Why please check the search option location? 1. First select the Excel table and double-click to open it. Then in this interface, select all cells. 2. Then in this interface, click the "Edit" option in "File" in the top toolbar. 3. Secondly, in this interface, click "

The mobile Taobao app software provides a lot of good products. You can buy them anytime and anywhere, and everything is genuine. The price tag of each product is clear. There are no complicated operations at all, making you enjoy more convenient shopping. . You can search and purchase freely as you like. The product sections of different categories are all open. Add your personal delivery address and contact number to facilitate the courier company to contact you, and check the latest logistics trends in real time. Then some new users are using it for the first time. If you don’t know how to search for products, of course you only need to enter keywords in the search bar to find all the product results. You can’t stop shopping freely. Now the editor will provide detailed online methods for mobile Taobao users to search for store names. 1. First open the Taobao app on your mobile phone,

In our work, we often use wps software. There are many ways to process data in wps software, and the functions are also very powerful. We often use functions to find averages, summaries, etc. It can be said that as long as The methods that can be used for statistical data have been prepared for everyone in the WPS software library. Below we will introduce the steps of how to sort the scores in WPS. After reading this, you can learn from the experience. 1. First open the table that needs to be ranked. As shown below. 2. Then enter the formula =rank(B2, B2: B5, 0), and be sure to enter 0. As shown below. 3. After entering the formula, press the F4 key on the computer keyboard. This step is to change the relative reference into an absolute reference.
