suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie orderBy-Sortierung und Fuzzy-Abfrage in Angular

So implementieren Sie orderBy-Sortierung und Fuzzy-Abfrage in Angular

亚连
亚连Original
2018-06-14 15:31:211733Durchsuche

In diesem Artikel werden hauptsächlich die von Angular implementierten integrierten Filterreihenfolge- und Fuzzy-Abfragefunktionen vorgestellt, die AngularJS-Filter, Sortierung, String-Durchquerung, Abfragen und andere verwandte Betriebsfähigkeiten umfassen.

Das Beispiel in diesem Artikel beschreibt die von Angular implementierten integrierten Filter-, Sortier- und Fuzzy-Abfragefunktionen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt folgt: 

<!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>

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Konfigurationsschritte für Axios (ausführliches Tutorial)

Kompatible Browserprobleme in JS

Wie erhalte ich den Wert von SessionStorage mithilfe von JS

Wie implementiert man die Anmelde- und Registrierungsfunktion mithilfe von node.js und anderen Technologien?

So verwenden Sie den Filter in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie orderBy-Sortierung und Fuzzy-Abfrage in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

node.js angular Filter 字符串 JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：vue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial)Nächster Artikel：vue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial)

In Verbindung stehende Artikel

Mehr sehen