AngularJS 사용자 정의 필터 상세 설명 및 예제 코드

　　　　 AngularJS의 또 다른 특징은 UNIX 파이프의 방식으로 데이터 결과를 처리할 수 있는 필터를 제공한다는 것입니다.

　　파이프라인을 사용하면 양방향 데이터 바인딩에서 뷰의 표시를 더 쉽게 할 수 있습니다.

　　필터는 데이터를 새로운 형식으로 변환하며, 파이프라인으로 이어지는 스타일을 사용할 수 있으며, 추가적인 매개변수를 받을 수 있습니다.

　　구현 방식

　　필터를 정의하고 선언하는 방법을 보겠습니다. 먼저 우리의 모듈 myAppModule을 생성해야 합니다.

　　　　　　　　　　　　　　　　　　 var myAppModule=agular.module("myApp",[]);

　　다음은 모듈을 기반으로 필터를 생성하는 방법입니다:

myAppModule.filter("reverse",function(){
　　　　　　　　　　　
});

　　그 중 reverse는 필터의 이름이며, 필터 메서드 선언 뒤에 따르며, 메서드에서 다른 메서드를 반환합니다:

myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++{
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });

　　내부가 반환하는 메서드는 두 가지 매개변수를 포함하고 있습니다. 하나는 입력 값으로, 우리 필터가 받는 값입니다.

　　아래와 같은 필터를 구현하고 싶다면:

　　name | reverse

　　이 경우 input은 name이 대표하는 값입니다.

　　추가적인 매개변수는 선택사항입니다. 여기서는 uppercase이라는 bool 값을 받아들여서 대소문자 변환을 할지 여부를 판단합니다.

　　내부 구현의 코드는 설명할 필요가 없습니다. 마지막으로 필터링된 문자열을 반환하면 됩니다.

　　프로그램 예제

!doctype html
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      name:{{ name }}<br>
      reverse name:{{ name | reverse }}<br>
      reverse&uppercase name:{{ name | reverse:true }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.controller("myAppCtrl",["$scope",function($scope){
        $scope.name = "xingoo";
      });
      myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++{
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });
    </script>
  </body>
</html>

　　실행 결과

이것이 AngularJS 커스터마이zed 필터에 대한 자료 정리입니다. 이어서 관련 자료를 계속 추가할 예정입니다. 많은 지지를 해주셔서 감사합니다!

성명서: 본 문서는 인터넷에서 수집된 내용으로, 저작권자는 모두입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 웹사이트는 소유권을 가지지 않으며, 인공 편집을 거치지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용이 발견되면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보고서를 작성할 때는 #을 @으로 변경하십시오.）를 통해 신고하시고 관련 증거를 제공하시면, 실제로 확인되면 해당 사이트는 즉시 위반 내용을 삭제합니다.

기본 튜토리얼

좋아하는 것