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('name')">姓名</td>
<td ng-click="sort('age')">年龄</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의 웹 페이지에서 자동 플래시 종료 클릭을 구현하는 방법(자세한 튜토리얼)
Angular2의 Http 요청 원칙에 대하여(자세한 튜토리얼)
VueAwesomeSwiper를 사용할 때 흔히 발생하는 문제는 무엇인가요?
Node.js 크롤러를 사용하여 웹 페이지 요청을 구현하는 방법
위 내용은 Angularjs 필터를 사용하여 동적 검색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7749
15
1643
14
1397
52
1292
25
1234
29
Windows 11/10에서 촬영한 날짜별로 사진을 정렬하는 방법
Feb 19, 2024 pm 08:45 PM
이 기사에서는 Windows 11/10에서 촬영 날짜에 따라 사진을 정렬하는 방법을 소개하고 Windows에서 날짜별로 사진을 정렬하지 않는 경우 해결 방법에 대해 설명합니다. Windows 시스템에서는 이미지 파일을 쉽게 찾으려면 사진을 적절하게 정리하는 것이 중요합니다. 사용자는 날짜, 크기, 이름 등 다양한 정렬 방법을 기반으로 사진이 포함된 폴더를 관리할 수 있습니다. 또한 필요에 따라 오름차순 또는 내림차순을 설정하여 파일을 보다 유연하게 정리할 수 있습니다. Windows 11/10에서 촬영한 날짜별로 사진을 정렬하는 방법 Windows에서 촬영한 날짜별로 사진을 정렬하려면 다음 단계를 따르세요. 사진, 바탕화면 또는 사진을 저장한 폴더를 엽니다. 리본 메뉴에서
VirtualBox 고정 디스크를 동적 디스크로 또는 그 반대로 변환
Mar 25, 2024 am 09:36 AM
가상 머신을 생성할 때 디스크 유형을 선택하라는 메시지가 표시되며 고정 디스크 또는 동적 디스크를 선택할 수 있습니다. 고정 디스크를 선택했지만 나중에 동적 디스크가 필요하다는 사실을 깨닫게 된다면 어떻게 될까요? 아니면 그 반대의 경우도 가능합니다. 이번 포스팅에서는 VirtualBox 고정 디스크를 동적 디스크로 또는 그 반대로 변환하는 방법을 살펴보겠습니다. 동적 디스크는 처음에는 크기가 작다가 가상 머신에 데이터를 저장함에 따라 크기가 커지는 가상 하드 디스크입니다. 동적 디스크는 필요한 만큼만 호스트 저장 공간을 차지하므로 저장 공간을 절약하는 데 매우 효율적입니다. 그러나 디스크 용량이 늘어나면 컴퓨터 성능이 약간 영향을 받을 수 있습니다. 고정 디스크와 동적 디스크는 일반적으로 가상 머신에서 사용됩니다.
Outlook에서 보낸 사람, 제목, 날짜, 카테고리, 크기별로 이메일을 정렬하는 방법
Feb 19, 2024 am 10:48 AM
Outlook은 작업을 보다 효율적으로 관리하는 데 도움이 되는 다양한 설정과 기능을 제공합니다. 그 중 하나는 필요에 따라 이메일을 분류할 수 있는 정렬 옵션입니다. 이 튜토리얼에서는 Outlook의 정렬 기능을 사용하여 보낸 사람, 제목, 날짜, 카테고리 또는 크기와 같은 기준에 따라 전자 메일을 구성하는 방법을 알아봅니다. 이렇게 하면 중요한 정보를 더 쉽게 처리하고 찾을 수 있어 생산성이 높아집니다. Microsoft Outlook은 이메일과 달력 일정을 중앙에서 쉽게 관리할 수 있게 해주는 강력한 애플리케이션입니다. 이메일을 쉽게 보내고 받고 정리할 수 있으며, 내장된 캘린더 기능을 통해 다가오는 이벤트와 약속을 쉽게 추적할 수 있습니다. Outloo에 참여하는 방법
Xianyu에서 사용자를 검색하는 방법
Feb 24, 2024 am 11:25 AM
Xianyu는 어떻게 사용자를 검색하나요? 소프트웨어 Xianyu에서는 소프트웨어에서 소통하고 싶은 사용자를 직접 찾을 수 있습니다. 그런데 사용자를 검색하는 방법을 모르겠습니다. 검색 후 사용자들 사이에서 확인해보세요. 다음은 에디터가 사용자에게 제공하는 사용자 검색 방법에 대한 소개입니다. 관심이 있으신 분들은 꼭 들러보세요! Xianyu에서 사용자를 검색하는 방법 답변: 검색 후 사용자의 세부 정보를 봅니다. 소개: 1. 소프트웨어를 입력하고 검색 상자를 클릭합니다. 2. 사용자 이름을 입력하고 검색을 클릭하세요. 3. 검색창 아래의 [사용자]를 선택하여 해당 사용자를 찾으세요.
Baidu 고급 검색을 사용하는 방법
Feb 22, 2024 am 11:09 AM
Baidu 고급 검색 사용 방법 Baidu 검색 엔진은 현재 중국에서 가장 일반적으로 사용되는 검색 엔진 중 하나이며, 그 중 하나가 고급 검색입니다. 고급 검색은 사용자가 필요한 정보를 보다 정확하게 검색하고 검색 효율성을 높이는 데 도움이 됩니다. 그렇다면 Baidu 고급 검색을 사용하는 방법은 무엇입니까? 첫 번째 단계는 Baidu 검색 엔진 홈페이지를 여는 것입니다. 먼저 Baidu의 공식 웹사이트인 www.baidu.com을 열어야 합니다. 바이두 검색에 들어가는 입구입니다. 두 번째 단계에서는 고급 검색 버튼을 클릭하세요. 바이두 검색창 오른쪽에
WPS 테이블에서 검색 중인 데이터를 찾을 수 없습니다. 검색 옵션 위치를 확인하세요.
Mar 19, 2024 pm 10:13 PM
지능이 지배하는 시대에는 사무용 소프트웨어도 대중화되었으며, 유연성으로 인해 대다수의 직장인이 Wps 형식을 채택합니다. 직장에서는 간단한 양식 작성과 텍스트 입력뿐만 아니라 실제 업무를 완료하기 위해 더 많은 운영 기술을 습득해야 합니다. 데이터가 포함된 보고서와 양식을 사용하는 것이 더욱 편리하고 명확하며 정확합니다. 오늘 우리가 당신에게 전하는 교훈은: WPS 테이블이 당신이 찾고 있는 데이터를 찾을 수 없다는 것입니다. 왜 검색 옵션 위치를 확인해야 합니까? 1. 먼저 Excel 테이블을 선택하고 두 번 클릭하여 엽니다. 그런 다음 이 인터페이스에서 모든 셀을 선택합니다. 2. 그런 다음 이 인터페이스의 상단 도구 모음에 있는 "파일"에서 "편집" 옵션을 클릭합니다. 3. 둘째, 이 인터페이스에서 "
모바일 타오바오 매장 검색하는 방법 매장명 검색하는 방법
Mar 13, 2024 am 11:00 AM
모바일 타오바오 앱 소프트웨어는 언제 어디서나 구입할 수 있으며, 모든 제품의 가격표가 명확하여 더욱 편리한 쇼핑을 즐길 수 있습니다. 원하는 대로 자유롭게 검색하고 구매할 수 있습니다. 개인 배송 주소와 연락처를 추가하면 택배사에서 쉽게 연락할 수 있으며, 최신 물류 동향도 실시간으로 확인할 수 있습니다. 사용자가 처음 사용하는 경우 제품을 검색하는 방법을 모르면 검색창에 키워드만 입력하면 모든 제품 결과를 자유롭게 찾을 수 있습니다. 에디터는 모바일 타오바오 사용자가 매장 이름을 검색할 수 있는 자세한 온라인 방법을 제공합니다. 1. 먼저 휴대폰에서 타오바오 앱을 열고,
WPS 점수를 정렬하는 방법
Mar 20, 2024 am 11:28 AM
우리 작업에서는 wps 소프트웨어를 자주 사용합니다. wps 소프트웨어에서는 데이터를 처리하는 방법이 다양하고 그 기능도 매우 강력합니다. 우리는 평균, 요약 등을 찾는 기능을 자주 사용합니다. WPS 소프트웨어 라이브러리에는 모든 사람을 위해 통계 데이터에 사용할 수 있는 방법이 준비되어 있습니다. 아래에서는 WPS에서 점수를 정렬하는 방법을 소개합니다. 이 내용을 읽고 나면 경험을 통해 배울 수 있습니다. 1. 먼저 순위를 매길 테이블을 엽니다. 아래 그림과 같이. 2. 그런 다음 수식 =rank(B2, B2: B5, 0)을 입력하고, 반드시 0을 입력하세요. 아래 그림과 같이. 3. 수식을 입력한 후 컴퓨터 키보드의 F4 키를 누르면 상대참조가 절대참조로 변경됩니다.
