Comment implémenter le tri orderBy et la requête floue dans Angular-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-14 15:31:21

original

1776 Les gens l'ont consulté

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>

Copier après la connexion

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!