使用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 配对要让一切正常运行，您需要先将

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

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

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

Vue报错：无法正确使用filters中的过滤器，怎样解决？Aug 26, 2023 pm 01:10 PM

Vue报错：无法正确使用filters中的过滤器，怎样解决？引言：在Vue中，过滤器（filters）是一个常用的功能，可以用来对数据进行格式化或者过滤。然而，在使用过程中，有时候我们可能会遇到无法正确使用过滤器的问题。本文将介绍一些常见的原因和解决方法。一、原因分析：过滤器未正确注册：Vue中的过滤器需要先进行注册，才能在模板中使用。如果过滤器未成功注册，

在PHP中，FILTER_VALIDATE_URL常量表示用于验证URL的过滤器Sep 14, 2023 am 10:37 AM

FILTER_VALIDATE_URL常量用于验证URL。标志FILTER_FLAG_SCHEME_REQUIRED−URL必须符合RFC标准。FILTER_FLAG_HOST_REQUIRED−URL必须包含主机名。FILTER_FLAG_PATH_REQUIRED−URL必须在域名后面有路径。FILTER_FLAG_QUERY_REQUIRED−URL必须有查询字符串。返回值FILTER_VALIDATE_URL

See all articles