Maison > Article > interface Web > Comment implémenter le tri orderBy et la requête floue dans Angular

Comment implémenter le tri orderBy et la requête floue dans Angular

亚连original: 2018-06-14 15:31:211730parcourir

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:&#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>

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!

node.js angular Filter 字符串 JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：vue vuex vue-rouert routage des autorisations (tutoriel détaillé)Article suivant：vue vuex vue-rouert routage des autorisations (tutoriel détaillé)

Articles Liés

Voir plus