Anglejs 필터를 사용하는 방법은 무엇입니까? Anglejs 필터 사용 방법 소개

이 글에서는 주로 angularjs 필터 사용 방법에 대한 자세한 설명을 다루며, Anglejs 필터에는 더 많은 서식 스타일이 있습니다. 다음으로 이 글을 함께 읽어보도록 하겠습니다.

angularjs 필터 사용에 대해 먼저 이야기해 보겠습니다.

AnularJS 필터는 서식 지정에 사용됩니다. 사용자에게 표시해야 하는 데이터를 최적화하기 위한 많은 실용적인 내장 필터가 있거나 직접 작성할 수 있습니다.

HTML의 템플릿 바인딩 기호 {{ }} 내에 | 기호를 사용하여 필터를 호출합니다. 예를 들어 문자열

을 대문자로 변환하려고 한다고 가정합니다. 문자열의 각 문자를 개별적으로 변환하거나 필터를 사용할 수 있습니다.

{{ name | uppercase }}

필터는 다음과 같습니다. JavaScript 코드에서 $filter를 통해 호출됩니다. 예를 들어 JavaScript 코드에서 소문자 필터를 사용하는 경우:

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

HTML 형식의 필터를 사용하는 경우 매개변수를 필터에 전달해야 하는 경우 필터 이름 #🎜🎜 뒤에 콜론을 추가하면 됩니다. ## 그냥 🎜🎜#. 매개변수가 여러 개인 경우 각 매개변수 뒤에 콜론을 추가할 수 있습니다. 예를 들어 숫자 필터는 필터 뒤에 2를 입력하여 필터에 매개변수로 2를 전달함으로써 소수점

뒤의 자릿수를 제한할 수 있습니다.

<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}

#🎜 🎜#1.currency

currency 필터는 숫자 값을 통화 형식으로 지정할 수 있습니다. 123

을 통화 형식으로 변환하려면 {{ 123 | 통화 }}를 사용하세요.

currency 필터를 사용하면 통화 기호를 직접 설정할 수 있습니다. 기본적으로 클라이언트가 위치한 지역의 통화 기호

가 사용되지만 통화 기호를 사용자 정의할 수도 있습니다. (자세한 내용을 보려면 PHP 중국어 웹사이트의

AngularJS 학습 매뉴얼

열을 참조하세요.)

2.date

#🎜 🎜##🎜🎜 #date 필터는 날짜 형식을 필요한 형식으로 지정할 수 있습니다. AngularJS에는 여러 가지 날짜 형식이 내장되어 있습니다.

을 지정하여 형식을 사용하지 않으면 기본적으로 MediumDate 형식이 사용됩니다.

다음은 기본적으로 지원되는 현지화된 날짜 형식입니다.

{{ 오늘 날짜: ' 중간' }} 5244c300d2f22789e33c1b935e7f035d

• {{ 오늘 날짜:'짧음' } } f4f46e8aa0a993461e8cd4c56ec815d5

• {{ 오늘 | 날짜:'fullDate' }} f40fa97102e570d8fc9ba27768e4b2fb

• {{ 오늘 | 날짜:'longDate' }} 40ede21747fb4c1766d7075487cc7935# 🎜 🎜#

{{ 오늘 | 날짜:'mediumDate' }}40ede21747fb4c1766d7075487cc7935

• #🎜🎜 #

  {{ 오늘 | 날짜:'shortDate' }} ab26afba1841e70cb2e82a6b5d783d0d

• {{ 오늘 | 날짜 :'mediumTime' }}58541c9b496cbad216df35914602d9b7

• {{ 오늘 날짜:'shortTime' }} < !-- 오후 12시 -->
연도 형식 지정

• 4자리 연도 : {{ 오늘 | 날짜:'yyyy' }} 2454eba55ce5af447d63d506f0b22009

두 자리 연도: {{ 오늘 | 날짜:'yy' }} 177d5281aa1717d5f08f08090e420090

영어 월 약어: {{ today | date:'MMM' }} 5812613cefcefb85ab7a2a7f2b19a771

월: {{ today |date:'MM' }} 3d87cfb55349227687b3452c217da412

월: {{ 오늘 |날짜:'M' }} 0d07dfb83b43f33ffd3d813164ae49ba

# 🎜🎜#날짜 형식 지정

숫자 날짜: {{ 오늘|날짜:'dd' }} bdf347c31d338c5559ea24febd3d6d74

해당 월의 날짜: {{ 오늘 | 날짜:'d' }} 10f30089400a4cdc8cfbd8d11fd537ef

영어 주간: {{ 오늘 날짜:'EEEE' } } 44204e7c5cf4cb3ebaab7a4476061bb3

주의 영어 약어: {{ today | date:'EEE' }} ea058d0751acaf64361b1abb55a9f5e4

#🎜 🎜#

시간 형식

24시간 디지털 시간: {{today|date:'HH'}} ef72c658846c1084161df55b19ce8c24#🎜 🎜## 🎜🎜#오늘의 시간: {{오늘|날짜:'H'}} 902f4f72964ab5f05217214ee25eb31b

12시간 디지털 시간: { {오늘|날짜:' hh'}} fb30a4b0d26192a15972624ccb337852

오전 또는 오후 시간: {{today|date:'h'}} < !--12--> ;

분 형식 지정

분 수: {{ 오늘 | 날짜:'mm' }} b4efbea91efd46a5f72b498ff4329510시간의 첫 번째 분: {{ 오늘 | 날짜:'m' }} 10f30089400a4cdc8cfbd8d11fd537ef#🎜🎜 #

초 형식

초 수: {{ 오늘 | 날짜:'ss' }} 779138eee8ec233d5f15002382413251

초 1분 후: {{ 오늘 | 날짜:'s' }} dfa9fc8a6a43443cb66797c35cf883e1

밀리초 수: {{ 오늘 날짜:'.sss' }} 132404d696749dd146bc462e6ef8004e

다음은 사용자 정의 날짜 형식의 몇 가지 예입니다.

#🎜🎜 #

{{ today | date:&#39;MMMd, y&#39; }} <!-- Aug9, 2013 -->
{{ today | date:&#39;EEEE, d, M&#39; }} <!-- Thursday, 9, 8-->
{{ today | date:&#39;hh:mm:ss.sss&#39; }} <!-- 12:09:02.995 -->

filter필터는 주어진 배열의 부분 집합을 반환하고 이를 반환하여 새 배열을 생성합니다.

例如，用下面的过滤器可以选择所有包含字母e的单词：

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

如果要过滤对象，可以使用上面提到的对象过滤器。例如，如果有一个由people对象组成的

数组，每个对象都含有他们最喜欢吃的食物的列表，那么可以用下面的形式进行过滤：

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

也可以用自定义函数进行过滤（在这个例子中函数定义在$scope上）：

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

isCapitalized函数的功能是根据首字母是否为大写返回true或false，具体如下所示：

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

自定义过滤器

首先，创建一个模块用以在应用中进行引用

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

现在，如果想将一个句子的首字母转换成大写形式，可以用过滤器先将整个句子都转换成小

写，再把首字母转换成大写：

<!-- Ginger loves dog treats -->
{{ &#39;ginger loves dog treats&#39; | lowercase | capitalize }}

以上就是AngularJS过滤器的使用方法（想看更多就到PHP中文网，AngularJS使用手册栏目学习），有问题的可以在下方提问。

【小编推荐】

angularjs如何搭建开发环境？angularjs搭建开发环境的过程分析

angularjs怎么开发web应用？angularjs开发web应用实例

위 내용은 Anglejs 필터를 사용하는 방법은 무엇입니까? Anglejs 필터 사용 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!