AngularJS 기본 지식 노트 - Filter_AngularJS
필터는 데이터를 수정하는 데 사용되며 표현식이나 파이프 지시문을 사용하여 포함될 수 있습니다. 다음은 일반적으로 사용되는 필터 목록입니다.
S.No. 이름 설명
1 대문자 텍스트를 대문자 텍스트로 변환합니다.
2 소문자 텍스트를 소문자 텍스트로 변환합니다.
3 통화 통화 형식 텍스트입니다.
4 필터 제공된 기준에 따라 배열의 하위 집합을 필터링합니다.
5 정렬 정렬은 표준 기본 배열을 제공합니다. 캡스 필터
파이프 문자를 사용하여 대문자 필터 표현식을 추가합니다. 여기에 학생 이름을 모두 대문자로 인쇄하기 위해 대문자 필터가 추가되었습니다.
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
소문자 필터
파이프 표현식을 사용하여 소문자 필터를 추가합니다. 학생 이름을 소문자로 인쇄하려면 여기에 소문자 필터를 추가하세요.
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}
통화 필터
캐나다 달러 필터는 파이프 문자를 사용하여 숫자 표현식을 반환합니다. 여기서는 통화 형식을 사용하여 요금을 인쇄하기 위해 통화 필터를 추가했습니다.
Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}
필터 중의 필터
필수 주제만 표시하려면 subjectName을 필터로 사용합니다.
Enter subject: <input type="text" ng-model="subjectName">
Subject:
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
정렬 필터
태그별로 주제를 정렬하려면 orderBy 태그를 사용합니다.
제목:
<ul>
<li ng-repeat="subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
예
다음 예에서는 위의 모든 필터를 보여줍니다.
testAngularJS.html
<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td></tr>
</table>
</div>
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.
핫 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)
뜨거운 주제
7628
15
1389
52
89
11
70
19
31
140
Vue 오류: 필터의 필터를 올바르게 사용할 수 없습니다. 어떻게 해결합니까?
Aug 26, 2023 pm 01:10 PM
Vue 오류: 필터의 필터를 올바르게 사용할 수 없습니다. 어떻게 해결합니까? 소개: Vue에서 필터는 데이터 형식을 지정하거나 필터링하는 데 사용할 수 있는 일반적으로 사용되는 기능입니다. 하지만 사용 중에 필터를 제대로 사용하지 못하는 문제가 발생할 수 있습니다. 이 문서에서는 몇 가지 일반적인 원인과 해결 방법을 다룹니다. 1. 원인 분석: 필터가 올바르게 등록되지 않았습니다. Vue의 필터를 템플릿에서 사용하려면 먼저 등록해야 합니다. 필터가 성공적으로 등록되지 않은 경우,
입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼
Jun 15, 2017 pm 05:50 PM
자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.
PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공
Jun 27, 2023 pm 07:37 PM
오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. PHP는 배우기 쉬움, 크로스 플랫폼, 풍부한 도구 라이브러리, 개발 효율성 등 많은 장점을 가지고 있습니다.
Vue 기술 개발에서 데이터를 필터링하고 정렬하는 방법
Oct 09, 2023 pm 01:25 PM
Vue 기술 개발에서 데이터 필터링 및 정렬 방법 Vue 기술 개발에서 데이터 필터링 및 정렬은 매우 일반적이고 중요한 기능입니다. 데이터 필터링 및 정렬을 통해 필요한 정보를 신속하게 쿼리하고 표시할 수 있어 사용자 경험이 향상됩니다. 이 기사에서는 Vue에서 데이터를 필터링하고 정렬하는 방법을 소개하고 독자가 이러한 기능을 더 잘 이해하고 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. 데이터 필터링 데이터 필터링이란 특정 조건에 따라 요구 사항을 충족하는 데이터를 필터링하는 것을 의미합니다. Vue에서는 comp를 전달할 수 있습니다.
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
Vue3의 필터 기능: 데이터를 우아하게 처리
Jun 18, 2023 pm 02:46 PM
Vue3의 필터 기능: 데이터를 우아하게 처리하기 Vue는 대규모 커뮤니티와 강력한 플러그인 시스템을 갖춘 인기 있는 JavaScript 프레임워크입니다. Vue에서 필터 기능은 템플릿의 데이터를 처리하고 형식을 지정할 수 있는 매우 실용적인 도구입니다. Vue3의 필터 기능에 몇 가지 변경 사항이 있습니다. 이 기사에서는 Vue3의 필터 기능에 대해 자세히 알아보고 이를 사용하여 데이터를 적절하게 처리하는 방법을 알아봅니다. 필터 기능이란 무엇입니까? Vue에서 필터 기능은 다음과 같습니다.
PHP 이메일 필터: 스팸을 필터링하고 식별합니다.
Sep 19, 2023 pm 12:51 PM
PHP 이메일 필터: 스팸을 필터링하고 식별합니다. 이메일이 널리 보급되면서 스팸의 양도 계속해서 증가하고 있습니다. 사용자에게 수신되는 스팸의 양은 정보 과부하와 시간 낭비로 이어질 수 있습니다. 따라서 스팸 이메일을 필터링하고 식별하는 효율적인 방법이 필요합니다. 이 기사에서는 PHP를 사용하여 간단하지만 효과적인 이메일 필터를 작성하는 방법을 보여주고 구체적인 코드 예제를 제공합니다. 이메일 필터의 기본 원리 이메일 필터의 기본 원리는 이메일이 유효한지 여부를 결정하는 것입니다.
플러그인을 사용하여 Vue에서 사용자 정의 필터를 구현하는 팁
Jun 25, 2023 pm 05:01 PM
Vue에서 플러그인을 사용하여 사용자 정의 필터를 구현하는 팁 Vue.js는 뷰 데이터 필터링, 즉 필터에 대한 요구를 처리하는 편리한 방법을 제공합니다. 필터는 주로 데이터를 보다 직관적이고 이해하기 쉽게 만들기 위해 뷰의 데이터 형식을 지정하고 처리하는 역할을 합니다. Vue에는 날짜 형식, 통화 형식 등과 같이 일반적으로 사용되는 필터가 내장되어 있으며 사용자 정의 필터도 지원합니다. 이 기사에서는 Vue 플러그인을 사용하여 사용자 정의 필터를 구현하는 방법을 소개하고 몇 가지 실용적인 필터링 기술을 제공합니다.
