AngularJS_AngularJS에서 필터 사용에 대한 자세한 설명
필터는 데이터를 수정하는 데 사용되며 표현식이나 파이프 지시문을 사용하여 포함될 수 있습니다. 다음은 일반적으로 사용되는 필터 목록입니다.
소문자 필터
파이프 표현식을 사용하여 소문자 필터를 추가합니다. 학생 이름을 소문자로 인쇄하려면 여기에 소문자 필터를 추가하세요.
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 태그를 사용합니다.
Subject:
<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>
출력
웹 브라우저에서 textAngularJS.html을 열고 다음 결과를 확인하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7322
9
1625
14
1350
46
1262
25
1209
29
입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼
Jun 15, 2017 pm 05:50 PM
자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.
Vue3의 필터 기능: 데이터를 우아하게 처리
Jun 18, 2023 pm 02:46 PM
Vue3의 필터 기능: 데이터를 우아하게 처리하기 Vue는 대규모 커뮤니티와 강력한 플러그인 시스템을 갖춘 인기 있는 JavaScript 프레임워크입니다. Vue에서 필터 기능은 템플릿의 데이터를 처리하고 형식을 지정할 수 있는 매우 실용적인 도구입니다. Vue3의 필터 기능에 몇 가지 변경 사항이 있습니다. 이 기사에서는 Vue3의 필터 기능에 대해 자세히 알아보고 이를 사용하여 데이터를 적절하게 처리하는 방법을 알아봅니다. 필터 기능이란 무엇입니까? Vue에서 필터 기능은 다음과 같습니다.
플러그인을 사용하여 Vue에서 사용자 정의 필터를 구현하는 팁
Jun 25, 2023 pm 05:01 PM
Vue에서 플러그인을 사용하여 사용자 정의 필터를 구현하는 팁 Vue.js는 뷰 데이터 필터링, 즉 필터에 대한 요구를 처리하는 편리한 방법을 제공합니다. 필터는 주로 데이터를 보다 직관적이고 이해하기 쉽게 만들기 위해 뷰의 데이터 형식을 지정하고 처리하는 역할을 합니다. Vue에는 날짜 형식, 통화 형식 등과 같이 일반적으로 사용되는 필터가 내장되어 있으며 사용자 정의 필터도 지원합니다. 이 기사에서는 Vue 플러그인을 사용하여 사용자 정의 필터를 구현하는 방법을 소개하고 몇 가지 실용적인 필터링 기술을 제공합니다.
Vue 기술 개발에서 데이터를 필터링하고 정렬하는 방법
Oct 09, 2023 pm 01:25 PM
Vue 기술 개발에서 데이터 필터링 및 정렬 방법 Vue 기술 개발에서 데이터 필터링 및 정렬은 매우 일반적이고 중요한 기능입니다. 데이터 필터링 및 정렬을 통해 필요한 정보를 신속하게 쿼리하고 표시할 수 있어 사용자 경험이 향상됩니다. 이 기사에서는 Vue에서 데이터를 필터링하고 정렬하는 방법을 소개하고 독자가 이러한 기능을 더 잘 이해하고 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. 데이터 필터링 데이터 필터링이란 특정 조건에 따라 요구 사항을 충족하는 데이터를 필터링하는 것을 의미합니다. Vue에서는 comp를 전달할 수 있습니다.
PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공
Jun 27, 2023 pm 07:37 PM
오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. PHP는 배우기 쉬움, 크로스 플랫폼, 풍부한 도구 라이브러리, 개발 효율성 등 많은 장점을 가지고 있습니다.
Vue 오류: 필터의 필터를 올바르게 사용할 수 없습니다. 어떻게 해결합니까?
Aug 26, 2023 pm 01:10 PM
Vue 오류: 필터의 필터를 올바르게 사용할 수 없습니다. 어떻게 해결합니까? 소개: Vue에서 필터는 데이터 형식을 지정하거나 필터링하는 데 사용할 수 있는 일반적으로 사용되는 기능입니다. 하지만 사용 중에 필터를 제대로 사용하지 못하는 문제가 발생할 수 있습니다. 이 문서에서는 몇 가지 일반적인 원인과 해결 방법을 다룹니다. 1. 원인 분석: 필터가 올바르게 등록되지 않았습니다. Vue의 필터를 템플릿에서 사용하려면 먼저 등록해야 합니다. 필터가 성공적으로 등록되지 않은 경우,
PHP 이메일 필터: 스팸을 필터링하고 식별합니다.
Sep 19, 2023 pm 12:51 PM
PHP 이메일 필터: 스팸을 필터링하고 식별합니다. 이메일이 널리 보급되면서 스팸의 양도 계속해서 증가하고 있습니다. 사용자에게 수신되는 스팸의 양은 정보 과부하와 시간 낭비로 이어질 수 있습니다. 따라서 스팸 이메일을 필터링하고 식별하는 효율적인 방법이 필요합니다. 이 기사에서는 PHP를 사용하여 간단하지만 효과적인 이메일 필터를 작성하는 방법을 보여주고 구체적인 코드 예제를 제공합니다. 이메일 필터의 기본 원리 이메일 필터의 기본 원리는 이메일이 유효한지 여부를 결정하는 것입니다.
Tomcat 잘못된 코드를 해결하는 몇 가지 방법
Dec 28, 2023 pm 01:32 PM
특정 코드 예제가 필요한 Tomcat의 중국어 문자 문제를 해결하는 몇 가지 방법 웹 개발에서 Tomcat의 중국어 문자 문제에 자주 직면합니다. 이 문제는 한자를 처리할 때 문자가 깨지거나 상자, 물음표 및 기타 문자로 표시되어 사용자에게 나쁜 경험을 선사합니다. 이 문제를 해결하기 위해 이 기사에서는 일반적으로 사용되는 몇 가지 방법을 소개하고 구체적인 코드 예제를 제공합니다. Tomcat 구성 파일을 수정합니다. Tomcat 설치 디렉터리에서 conf/server.xml 파일을 찾아 기본값을 검색합니다.
