Home > Article > Web Front-end > Detailed explanation of Angularjs filters to implement dynamic search and sorting functions

Detailed explanation of Angularjs filters to implement dynamic search and sorting functions

小云云Original: 2017-12-14 11:25:332099browse

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 it. I hope it can help everyone.

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>

Operation effect:

Related recommendations:

AngularJS filter filter usage example analysis

Detailed explanation of the use of AngularJS filter_AngularJS

How to use AngularJS programming ideas

The above is the detailed content of Detailed explanation of Angularjs filters to implement dynamic search and sorting functions. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Angular4 form response function example analysisNext article：Angular4 form response function example analysis

See more

Detailed explanation of Angularjs filters to implement dynamic search and sorting functions

Related articles