Heim > Artikel > Web-Frontend > So implementieren Sie eine dynamische Suche mit dem Angularjs-Filter

So implementieren Sie eine dynamische Suche mit dem Angularjs-Filter

亚连Original: 2018-06-20 18:18:431365Durchsuche

In diesem Artikel werden hauptsächlich die dynamischen Such- und Sortierfunktionen von Angularjs-Filtern vorgestellt, einschließlich der Fähigkeiten zum Suchen, Abfragen und Sortieren von AngularJS-Filtern. Freunde in Not können sich darauf beziehen.

Dieser Artikel beschreibt die Angularjs-Filterung mit Beispiele Das Gerät implementiert dynamische Such- und Sortierfunktionen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Verwenden Sie AngularJS, um dynamisches Einfügen zu implementieren, und verwenden Sie Filter, um Daten zu suchen und zu sortieren.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS过滤器测试</title>
</head>
<body ng-controller="app">
  <table>
    <tr>
      <td ng-click="sort(&#39;name&#39;)">姓名</td>
      <td ng-click="sort(&#39;age&#39;)">年龄</td>
    </tr>
    <tr ng-repeat="arr1 in arr1">
      <td>{{arr1.name}}</td>
      <td>{{arr1.age}}</td>
    </tr>
  </table>
  <input id="wei" type="text" ng-focus="concentrate()" >
  <input type="button" ng-click="search()" value="搜索">
</body>
<script src="angular.min.js"></script>
<script src="jquery.js"></script>
  <script>
    // var wei = document.getElementById("wei");
    // console.log(wei);
    // setTimeout(function(){
    // $("#wei").attr("disabled",false);
    // },3000);
    var m=angular.module("myApp",[]);
    m.controller("app",["$scope","$filter",function($scope,$filter){
      var arr=[
        {"name":"猪","age":20},
        {"name":"小猪","age":23},
        {"name":"大猫","age":227},
        {"name":"老虎","age":29},
        {"name":"中虎","age":29},
        {"name":"老虎","age":39},
        {"name":"老猫","age":47},
        {"name":"熊猫","age":29},
        {"name":"树懒","age":27},
        {"name":"狮子","age":59}
      ];
       $scope.arr1=arr;
       //实现查询功能
      var isopen=true;
      $scope.sort=function(str){
        $scope.arr1=$filter("orderBy")($scope.arr1,str,isopen);
        isopen=!isopen;
        //console.log(isopen);
      };
      $scope.concentrate=function(){
        console.log("已聚焦");
      }
      //实现查询功能
      $scope.search=function(){
        console.log(11);
        $scope.arr1=$filter("filter")(arr,document.getElementById("wei").value);
      }
    }]);
  </script>
</html>

Betriebseffekt:

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie automatische Flash-Kill-Klicks auf Webseiten in JS (ausführliches Tutorial)

So implementieren Sie http mini im Node-Crawler

Über das HTTP-Anfrageprinzip (ausführliches Tutorial) in Angular2

Welche Probleme treten wahrscheinlich bei der Verwendung von VueAwesomeSwiper auf?

So verwenden Sie den Node.js-Crawler, um Webseitenanfragen zu implementieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine dynamische Suche mit dem Angularjs-Filter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So erstellen Sie Vue-Anwendungen über vue-cliNächster Artikel：So erstellen Sie Vue-Anwendungen über vue-cli

In Verbindung stehende Artikel

Mehr sehen