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>

操作の効果:

上記は、私が皆さんのためにまとめたものです。、将来的には皆さんのお役に立てれば幸いです。

JS で Web ページに自動 Flash Kill クリックを実装する方法 (詳細なチュートリアル)

ノードに http 小型クローラーを実装する方法

angular2 の Http リクエストの原則について (詳細なチュートリアル)

VueAwesomeSwiper の使用時によくある問題は何ですか?

Node.js クローラーを使用して Web ページリクエストを実装する方法

以上がAngularjsフィルターを使用して動的検索を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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 高级框架设计视频教程》就对了。

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ヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ドリームウィーバー CS6

ビジュアル Web 開発ツール

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。