Maison > Article > interface Web > Comment implémenter le tri orderBy et la requête floue dans Angular
Cet article présente principalement les fonctions intégrées de tri d'ordre de filtre et de requête floue implémentées par Angular, impliquant les filtres AngularJS, le tri, le parcours de chaînes, les requêtes et d'autres compétences opérationnelles connexes. Les amis dans le besoin peuvent s'y référer
L'exemple de cet article décrit les fonctions de tri orderBy de filtre intégrées et de requête floue implémentées par Angular. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants : Jetons d'abord un coup d'œil à l'effet de course : Le code spécifique est le suivant suit :<!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>Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir. Articles associés :
Étapes de configuration pour Axios (tutoriel détaillé)
Problèmes de navigateur compatibles en JS
Comment obtenir la valeur de SessionStorage en utilisant JS
Comment implémenter la fonction de connexion et d'enregistrement à l'aide de node.js et d'autres technologies ?
Comment utiliser le filtre dans vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!