Home >Web Front-end >JS Tutorial >How to implement orderBy sorting and fuzzy query in Angular
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:
<!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:'-name':false"> <td>{{item.name|lowercase}}</td> <td>{{item.public}}</td> <td>{{item.update |date:'yyyy年MM月dd日 hh:mm:ss EEE'}}</td> <td>{{item.has}}</td> </tr> </tbody> </table> <p>{{price|currency:"¥"}}</p> </body> </html>
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!