Home Web Front-end JS Tutorial How to implement orderBy sorting and fuzzy query in Angular

How to implement orderBy sorting and fuzzy query in Angular

Jun 14, 2018 pm 03:31 PM
angular sort fuzzy query

This article mainly introduces the built-in filter orderBy sorting and fuzzy query functions implemented by Angular, involving AngularJS filters, sorting, string traversal, query and other related operation skills. Friends in need can refer to it

This article describes the built-in filter orderBy sorting and fuzzy query functions implemented by Angular. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the running effect first:

The specific code is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>www.jb51.net Angular模糊查询、排序</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    table{

      margin: 100px auto;

      border-collapse: collapse;

    }

    th,td{

      padding: 10px;

      border: 1px solid #000;

    }

  </style>

  <script src="angular.min.js"></script>

  <script>

    var myapp=angular.module("myapp",[]);

    myapp.controller("myCtrl",function ($scope) {

      $scope.books=[{

        name:"JavaScript",public:false,update:"1504707661308",has:true

      },{

        name:"Angular权威教程",public:false,update:"1204707661308",has:false

      },{

        name:"Vue实战",public:false,update:"1804707661308",has:false

      },{

        name:"JavaScript",public:true,update:"1504707561308",has:true

      }];

      $scope.price="99.9";

      /*$scope.filt=""*/

    })

  </script>

</head>

<body ng-app="myapp" ng-controller="myCtrl">

<input type="text" ng-model="filt">

<table>

  <thead><tr>

    <th>名字</th>

    <th>出版情况</th>

    <th>更新时间</th>

    <th>是否有库存</th>

  </tr></thead>

  <tbody>

  <!--|limitTo:2显示两条数据-->

  <tr ng-repeat="item in books | filter:filt |orderBy:&#39;-name&#39;:false">

    <td>{{item.name|lowercase}}</td>

    <td>{{item.public}}</td>

    <td>{{item.update |date:&#39;yyyy年MM月dd日 hh:mm:ss EEE&#39;}}</td>

    <td>{{item.has}}</td>

  </tr>

  </tbody>

</table>

<p>{{price|currency:"¥"}}</p>

</body>

</html>

Copy after login

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Configuring steps for Axios (detailed tutorial)

Compatible browser issues in JS

How to get the value of SessionStorage using JS

How to implement the login and registration function using node.js and other technologies?

How to use filter filter in vue

The above is the detailed content of How to implement orderBy sorting and fuzzy query in Angular. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1230
24
How to sort photos by date taken in Windows 11/10 How to sort photos by date taken in Windows 11/10 Feb 19, 2024 pm 08:45 PM

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

How to sort emails by sender, subject, date, category, size in Outlook How to sort emails by sender, subject, date, category, size in Outlook Feb 19, 2024 am 10:48 AM

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

PHP development: How to implement table data sorting and paging functions PHP development: How to implement table data sorting and paging functions Sep 20, 2023 am 11:28 AM

PHP development: How to implement table data sorting and paging functions In web development, processing large amounts of data is a common task. For tables that need to display a large amount of data, it is usually necessary to implement data sorting and paging functions to provide a good user experience and optimize system performance. This article will introduce how to use PHP to implement the sorting and paging functions of table data, and give specific code examples. The sorting function implements the sorting function in the table, allowing users to sort in ascending or descending order according to different fields. The following is an implementation form

Filtering and sorting XML data using Python Filtering and sorting XML data using Python Aug 07, 2023 pm 04:17 PM

Implementing filtering and sorting of XML data using Python Introduction: XML is a commonly used data exchange format that stores data in the form of tags and attributes. When processing XML data, we often need to filter and sort the data. Python provides many useful tools and libraries to process XML data. This article will introduce how to use Python to filter and sort XML data. Reading the XML file Before we begin, we need to read the XML file. Python has many XML processing libraries,

How to install Angular on Ubuntu 24.04 How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

C++ program: rearrange the position of words in alphabetical order C++ program: rearrange the position of words in alphabetical order Sep 01, 2023 pm 11:37 PM

In this problem, a string is given as input and we have to sort the words appearing in the string in lexicographic order. To do this, we assign an index starting from 1 to each word in the string (separated by spaces) and get the output in the form of sorted indices. String={"Hello","World"}"Hello"=1 "World"=2 Since the words in the input string are in lexicographic order, the output will print "12". Let's look at some input/result scenarios - Assuming all words in the input string are the same, let's look at the results - Input:{"hello","hello","hello"}Result:3 Result obtained

How does Arrays.sort() method in Java sort arrays by custom comparator? How does Arrays.sort() method in Java sort arrays by custom comparator? Nov 18, 2023 am 11:36 AM

How does Arrays.sort() method in Java sort arrays by custom comparator? In Java, the Arrays.sort() method is a very useful method for sorting arrays. By default, this method sorts in ascending order. But sometimes, we need to sort the array according to our own defined rules. At this time, you need to use a custom comparator (Comparator). A custom comparator is a class that implements the Comparator interface.

Token-based authentication with Angular and Node Token-based authentication with Angular and Node Sep 01, 2023 pm 02:01 PM

Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to

See all articles