Maison > Article > interface Web > Comment implémenter la recherche dynamique à l'aide du filtre Angularjs

Comment implémenter la recherche dynamique à l'aide du filtre Angularjs

亚连original: 2018-06-20 18:18:431319parcourir

Cet article présente principalement les fonctions de recherche et de tri dynamiques des filtres Angularjs, impliquant des compétences en matière d'opérations de recherche, de requête et de tri liées aux filtres AngularJS. Les amis dans le besoin peuvent s'y référer

Cet article décrit le filtrage Angularjs avec. exemples L'appareil implémente des fonctions de recherche et de tri dynamiques. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Utilisez angulairejs pour implémenter l'insertion dynamique et utilisez des filtres pour rechercher et trier les données.

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

Effet opérationnel :

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter des clics Flash Kill automatiques sur des pages Web en JS (tutoriel détaillé)

Comment implémenter http mini dans node Crawler

À propos du principe de la requête Http (tutoriel détaillé) dans angulaire2

Quels problèmes sont susceptibles de survenir lors de l'utilisation de VueAwesomeSwiper ?

Comment utiliser le robot d'exploration Node.js pour implémenter des requêtes de pages Web

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!

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：Comment créer des applications Vue via vue-cliArticle suivant：Comment créer des applications Vue via vue-cli

Articles Liés

Voir plus