Angularjs 필터를 사용하여 동적 검색을 구현하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

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>

작동 효과:

위는 제가 모든 사람을 위해 편집한 것입니다. . 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사

修复：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 高级框架设计视频教程》就对了。

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.