How to implement dynamic search using Angularjs filter-JS Tutorial-php.cn

How to implement dynamic search using Angularjs filter

亚连

Release： 2018-06-20 18:18:43

Original

1373 people have browsed it

This article mainly introduces the dynamic search and sorting functions of Angularjs filters, involving AngularJS filter-related search, query, and sorting operation skills. Friends in need can refer to the following

The examples in this article describe Angularjs filtering The device implements dynamic search and sorting functions. Share it with everyone for your reference, the details are as follows:

Use angularjs to implement dynamic insertion and use filters to search and sort data.

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

Copy after login

Operation effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement automatic flash kill clicks on web pages in JS (detailed tutorial)

How to implement http small in node Crawler

About Http request principle in angular2 (detailed tutorial)

What problems are likely to occur when using VueAwesomeSwiper?

How to use Node.js crawler to implement web page requests

The above is the detailed content of How to implement dynamic search using Angularjs filter. For more information, please follow other related articles on the PHP Chinese website!