앵 귤 러 필터

필터 (filter) 역할 은 하나의 파 라 메 터 를 받 아 특정한 규칙 함 수 를 통 해 처리 한 다음 에 처리 한 결 과 를 되 돌려 주 는 것 입 니 다.주로 데이터 포맷 에 사 용 됩 니 다. 예 를 들 어 한 배열 의 json 대상 을 가 져 오고 배열 의 요 소 를 정렬 하 는 등 입 니 다.angular 에는 currency (화폐), date (날짜), filter (하위 문자열 일치), json (json 대상 포맷), limito (개수 제한), uppercase (대문자), lowercase (소문 자), number (숫자), orderby (정렬) 등 내 장 된 필터 가 있 습 니 다.그 밖 에 필 터 를 사용자 정의 할 수 있 고 모든 요 구 를 만족 시 킬 수 있 는 데이터 처리 도 가능 합 니 다.다음은 필터 의 사용 방법 을 간단하게 소개 합 니 다. 필 터 는 상품 을 선별 하 는 과정 에서 많이 사 용 됩 니 다. 예 를 들 어 타 오 바 오의 상품 선별, 카 트 등 1 화폐 필터 currency 원시 데이터 출력 은 12 입 니 다.화폐 필터 1 출력 은 12.00 입 니 다.화폐 필터 2 출력 은 총 65509 ° 12.00 입 니 다.scope. price = 123.231 이면 화폐 필터 3 출력 은 $12.123 입 니 다.("|" 포맷 기호)

         ：<span ng-bind="price">
       1：<span ng-bind="price | currency">span>
  ：<input type="text" ng-model="length"><br />
          ：<input type="text" ng-model="index">
        <br />
        <ul>
            <li ng-repeat="u in users | limitTo:length:index">
                <span ng-bind="u.userID">span>****
                <span ng-bind="u.username">span>****
                <span ng-bind="u.nickname">span>
            li>
        ul>
       2：<span ng-bind="price | currency:'   ￥'">span>           3：<span ng-bind="price | currency:'￥':3">span>           
$scope.price=12

2 일자 시간 필터 date 원본 출력: "2017 - 04 - 29T 13: 08: 23.027Z" 날짜 포맷: Apr 29, 2017 날짜 포맷: 통상 적 인 경우 사용자 의 요구 에 따라 출력 해 야 하 며, 이때 매개 변수 y / M / d / h / m / s / E 년 / 월 / 일 / 시 / 분 / 초 / 주 2017 년 04 월 29 일 09: 08: 23 2017 년 04 월 29 일 09: 08: 23

<span ng-bind="date | date:'yyyy MM dd  hh:mm:ss'">span>
<span ng-bind="date | date:'yyyy MM dd '">span>
<span ng-bind="date | date:'hh:mm:ss'">span>

3. 출력 키워드 필터 링:
1 - cat - tom - (걸 러 낸)

      ：<input type="text" ng-model="keyword">
<ul>     
   <li ng-repeat="u in users | filter:keyword">
       <span ng-bind="u.userID">span>---
       <span ng-bind="u.username">span>---
       <span ng-bind="u.nickname">span>
   li>
ul>

4. JSON 필터 (데이터 의 대상 을 JSON 문자열 로 변환 하 는 형식 출력 을 페이지 에 자주 코드 프로그램 디 버 깅 에 사용) 배열 의 json 대상 을 문자열 로 출력 할 수 있 습 니 다.

 <span ng-bind="users|json">span>

5. 길이 제한 필터 길이: 길이 자 르 기 위치: 어느 위치 부터 1 - cat - tom 2 - mouse - jerry (걸 러 낸)

  ：<input type="text" ng-model="length">
  ：<input type="text" ng-model="index">
      <ul>
         <li ng-repeat="u in users | limitTo:length:index">
            <span ng-bind="u.userID">span>---
            <span ng-bind="u.username">span>---
            <span ng-bind="u.nickname">span>
         li>
      ul>

6. 문자열 대소 문자 변환 필터 John Smith JOHN SMITH john smith

<div ng-bind="name">div>
<div ng-bind="name | uppercase">div>
<div ng-bind="name | lowercase">div>

7. 정렬 출력 정렬 키워드: 정렬 순서: 거꾸로 2 - mouse - jerry (필터 링 된)

     ：<input type="text" ng-model="keyword">
    ：<input type="checkbox" ng-model="sort">  
          <ul>
            <li ng-repeat="u in users | orderBy:keyword:sort">
                <span ng-bind="u.userID">span>---
                <span ng-bind="u.username">span>---
                <span ng-bind="u.nickname">span>
            li>
          ul>