> 웹 프론트엔드 > JS 튜토리얼 > AngularJS 필터 필터 사용 사례 분석

AngularJS 필터 필터 사용 사례 분석

高洛峰
풀어 주다: 2017-02-07 14:00:46
원래의
1116명이 탐색했습니다.

이 기사의 예에서는 AngularJS 필터의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이 섹션에서는 Anglejs의 필터를 살펴보겠습니다.

저희 개발에서는 페이지에서 사용자에게 표시해야 하는 정보를 사용자에게 표시하기 전에 형식을 지정해야 합니다. 예를 들어 시간 현지화 또는 yyyy-MM-dd HH:mm:ss 형식, 디지털 정밀 형식, 현지화, 이름 형식 등이 있습니다. Angularjs는 일련의 기능을 쉽게 수행할 수 있도록 하는 필터라는 명령을 제공합니다. Angularjs는 숫자와 같은 많은 내장 필터를 제공합니다. 또한 자체 필드 필터를 쉽게 사용자 정의할 수도 있습니다.

다음 예:

html:

<div ng-app="app" ng-controller="test">
num:<input ng-model="num" />
<br/>
{{num | number}}
<br/>
{{num | number:2}}
<br/>
first name:<input ng-model="person.first"/>
<br/>
last name:<input ng-model="person.last"/>
<br/>
name: {{person | fullname}}
  <br/>
name: {{person | fullname:"- -"}}
    <br/>
name: {{person | fullname:" " | uppercase }}
</div>
로그인 후 복사

js:

function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
  var filterfun = function(person, sep) {
    sep = sep || " ";
    person = person || {};
    person.first = person.first || "";
    person.last = person.last || "";
    return person.first + sep + person.last;
  };
  return filterfun;
});
로그인 후 복사

jsfiddle 효과: http://jsfiddle.net/whitewolf/uCPPK/9 /

예제에서는 먼저angularjs와 함께 제공되는 숫자 필터의 사용을 보여줍니다. 또한 anglejs 필터를 만드는 방법도 보여줍니다. 구현은 매우 간단합니다.

최종 참고 사항: anglejs 필터는 값 filter1 | .

이 기사가 AngularJS 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

더 많은 AngularJS 필터 사용 사례 분석 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

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