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

寻∝梦
풀어 주다: 2018-09-06 15:49:50
원래의
1521명이 탐색했습니다.

이 글에서는 주로 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 형식이 사용됩니다.

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

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

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

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

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

  • {{ 오늘 | 날짜:'mediumDate' }}
  • #🎜🎜 #

    {{ 오늘 | 날짜:'shortDate' }}
  • {{ 오늘 | 날짜 :'mediumTime' }}
  • {{ 오늘 날짜:'shortTime' }} < !-- 오후 12시 -->
  • 연도 형식 지정
  • 4자리 연도 : {{ 오늘 | 날짜:'yyyy' }}
두 자리 연도: {{ 오늘 | 날짜:'yy' }} 형식

영어 월: {{ 오늘 | 날짜:'MMMM' }}

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

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

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

# 🎜🎜#날짜 형식 지정

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

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

영어 주간: {{ 오늘 날짜:'EEEE' } } < !-- 목요일 -->

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

#🎜 🎜#

시간 형식

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

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

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

분 형식 지정

분 수: {{ 오늘 | 날짜:'mm' }} #🎜🎜 #

초 형식

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

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

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

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

#🎜🎜 #
{{ 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的单词:

{{ [&#39;Ari&#39;,&#39;Lerner&#39;,&#39;Likes&#39;,&#39;To&#39;,&#39;Eat&#39;,&#39;Pizza&#39;] | filter:&#39;e&#39; }}
<!-- ["Lerner","Likes","Eat"] -->
로그인 후 복사

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

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

{{ [{
&#39;name&#39;: &#39;Ari&#39;,
&#39;City&#39;: &#39;San Francisco&#39;,
&#39;favorite food&#39;: &#39;Pizza&#39;
},{
&#39;name&#39;: &#39;Nate&#39;,
&#39;City&#39;: &#39;San Francisco&#39;,
&#39;favorite food&#39;: &#39;indian food&#39;
}] | filter:{&#39;favorite food&#39;: &#39;Pizza&#39;} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
로그인 후 복사

也可以用自定义函数进行过滤(在这个例子中函数定义在$scope上):

{{ [&#39;Ari&#39;,&#39;likes&#39;,&#39;to&#39;,&#39;travel&#39;] | filter:isCapitalized }}
<!-- ["Ari"] -->
로그인 후 복사

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

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};
로그인 후 복사

自定义过滤器

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

angular.module(&#39;myApp.filters&#39;, [])
.filter(&#39;capitalize&#39;, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿