使用Angularjs过滤器如何实现动态搜索-js教程-PHP中文网

首页

web前端

js教程

使用Angularjs过滤器如何实现动态搜索

亚连

Jun 20, 2018 pm 06:18 PM

angularjs动态排序搜索过滤器

这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下

本文实例讲述了Angularjs过滤器实现动态搜索与排序功能。分享给大家供大家参考，具体如下：

利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序.

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

运行效果：

上面是我整理给大家的，希望今后会对大家有帮助。

在JS中如何实现网页自动秒杀点击（详细教程）

在node中如何实现http小爬虫

在angular2中有关Http请求原理（详细教程）

使用VueAwesomeSwiper容易出现的问题？

使用Node.js爬虫如何实现网页请求

以上是使用Angularjs过滤器如何实现动态搜索的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

修复：Windows 11 的动态刷新率不起作用Apr 13, 2023 pm 08:52 PM

您可以通过计算图像每秒更新的次数来衡量屏幕的刷新率。DRR 是 Windows 11 中包含的一项新功能，可帮助您节省电池寿命，同时仍提供更流畅的显示，但当它无法正常工作时也就不足为奇了。随着越来越多的制造商宣布计划停止生产 60Hz 显示器，具有更高刷新率的屏幕预计将变得更加普遍。这将导致更流畅的滚动和更好的游戏，但它会以减少电池寿命为代价。但是，此 OS 迭代中的动态刷新率功能是一个漂亮的附加功能，可以对您的整体体验产生重大影响。继续阅读，我们将讨论如果 Windows 11 的动态刷新率未

如何在 iPhone 屏幕录制中隐藏动态岛和红色指示器Apr 13, 2023 am 09:13 AM

在iPhone上，Apple 的屏幕录制功能会录制您在屏幕上所做的事情的视频，如果您想捕捉游戏玩法、引导他人完成应用程序中的教程、演示错误或其他任何事情，这非常有用。在显示屏顶部有凹口的旧款 iPhone 上，该凹口在屏幕录制中不可见，这是应该的。但在带有 ‌Dynamic Island‌ 切口的较新 iPhone 上，例如 ‌iPhone 14 Pro‌ 和 ‌iPhone 14 Pro‌ Max，‌Dynamic Island‌ 动画显示红色录制指示器，这导致切口在捕获的视频中可见。这可能会

如何在 Windows 11 的桌面和开始菜单上获取动态磁贴Apr 14, 2023 pm 05:07 PM

想象一下，您正在系统上寻找某些东西，但不确定要打开或选择哪个应用程序。这就是动态磁贴功能发挥作用的地方。任何支持的应用程序的动态磁贴都可以添加到桌面或Windows系统的开始菜单上，其磁贴经常变化。LiveTiles使应用程序小部件变得活跃起来，非常令人愉悦。不仅是为了它的外观，甚至是为了方便。假设您在系统上使用whatsapp或facebook应用程序，如果在应用程序图标上显示通知数量不是很方便吗？如果将任何此类受支持的应用程序添加为动态磁贴，则这是可能的。让我们看看如何在Windows

如何在 Windows 11 上使用动态锁定Apr 13, 2023 pm 08:31 PM

什么是 Windows 11 上的动态锁定？动态锁定是 Windows 11 的一项功能，可在连接的蓝牙设备（您的手机或可穿戴设备）超出范围时锁定您的计算机。即使您在离开时忘记使用 Windows 键 + L 快捷键，动态锁定功能也会自动锁定您的 PC。Dynamic Lock 使用任何带有蓝牙的连接设备，但最好使用电池电量和续航里程充足的设备，例如您的手机。一旦您的设备在 30 秒内无法触及，Windows 将自动锁定屏幕。将蓝牙设备与 Windows 11 配对要让一切正常运行，您需要先将

具有高刷新率显示器的 Windows 11 笔记本电脑和平板电脑（例如 Surface Laptop Studio）具有称为动态刷新率或 DRR 的简洁功能。顾名思义，DRR 会降低或提高您在旅途中的显示刷新率，具体取决于您所做的事情以及设备显示的内容。例如，当您使用墨水、玩游戏或滚动时，Windows 11 会切换到最大刷新率，然后在显示静态或不太动态的内容时回落到 60Hz

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Vue3中的过滤器函数：优雅的处理数据Jun 18, 2023 pm 02:46 PM

Vue3中的过滤器函数：优雅的处理数据Vue是一个流行的JavaScript框架，拥有庞大的社区和强大的插件系统。在Vue中，过滤器函数是一种非常实用的工具，允许我们在模板中对数据进行处理和格式化。Vue3中的过滤器函数有了一些改变，在这篇文章中，我们将深入探讨Vue3中的过滤器函数，学习如何使用它们优雅地处理数据。什么是过滤器函数？在Vue中，过滤器函数是

Vue 中使用插件实现自定义过滤器的技巧Jun 25, 2023 pm 05:01 PM

Vue中使用插件实现自定义过滤器的技巧Vue.js提供了一种方便的方式来处理视图数据过滤的需求，即过滤器（Filter）。过滤器主要负责将视图中的数据进行格式化和处理，使数据更加直观和易于理解。Vue内置了一些常用的过滤器，例如日期格式化、货币格式化等，同时也支持自定义过滤器。本文将介绍如何使用Vue插件实现自定义过滤器的技巧，并提供一些实用的过滤

See all articles