이 글에서는 주로 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 학습 매뉴얼
열을 참조하세요.) #🎜 🎜##🎜🎜 #date 필터는 날짜 형식을 필요한 형식으로 지정할 수 있습니다. AngularJS에는 여러 가지 날짜 형식이 내장되어 있습니다.을 지정하여 형식을 사용하지 않으면 기본적으로 MediumDate 형식이 사용됩니다.
다음은 기본적으로 지원되는 현지화된 날짜 형식입니다.
{{ 오늘 날짜: ' 중간' }}
#🎜🎜 #
{{ 오늘 | 날짜:'shortDate' }}영어 월: {{ 오늘 | 날짜:'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:'MMMd, y' }} <!-- Aug9, 2013 --> {{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8--> {{ today | date:'hh:mm:ss.sss' }} <!-- 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 --> {{ 'ginger loves dog treats' | lowercase | capitalize }}
以上就是AngularJS过滤器的使用方法(想看更多就到PHP中文网,AngularJS使用手册栏目学习),有问题的可以在下方提问。
【小编推荐】
angularjs如何搭建开发环境?angularjs搭建开发环境的过程分析
angularjs怎么开发web应用?angularjs开发web应用实例
위 내용은 Anglejs 필터를 사용하는 방법은 무엇입니까? Anglejs 필터 사용 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!