AngularJS 필터 및 예제가 포함된 AngularJS 사용자 정의 필터

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

AngularJS의 필터란 무엇입니까?

A AngularJS에서 필터링 원래 형식을 변경하지 않고 사용자에게 표시할 표현식 값의 형식을 지정하는 데 도움이 됩니다. 예를 들어 문자열을 소문자 또는 대문자로 원하는 경우 필터를 사용하여 수행할 수 있습니다. 그에 따라 소문자 및 대문자 출력을 검색할 수 있는 '소문자', '대문자'와 같은 내장 필터가 있습니다.

AngularJS 사용자 정의 필터

때로는 Angular에 내장된 필터가 출력 필터링에 대한 요구 사항을 충족하지 못하는 경우가 있습니다. 이러한 경우 필요한 방식으로 출력을 전달할 수 있는 AngularJS 사용자 정의 필터를 생성할 수 있습니다.

마찬가지로 숫자의 경우 다른 필터를 사용할 수 있습니다. 이 튜토리얼에서는 Angular에서 사용할 수 있는 다양한 표준 내장 필터를 살펴보겠습니다.

AngularJS에서 사용자 정의 필터를 만드는 방법

아래의 사용자 정의 필터 AngularJS 예제에서 범위 객체를 통해 컨트롤러에서 뷰로 문자열을 전달하지만 문자열이 그대로 표시되기를 원하지 않습니다.

우리는 문자열을 표시할 때마다 사용자 정의 필터를 전달하도록 하고 싶습니다. AngularJS와, 다른 문자열을 추가하고 완성된 문자열을 사용자에게 표시합니다.

AngularJS에서 사용자 정의 필터 만들기

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

코드 설명

  1. 여기서는 tutorial이라는 멤버 변수에 "Angular"라는 문자열을 전달하고 이를 범위 개체에 연결합니다.
  2. Angular는 사용자 정의 필터를 만드는 데 사용할 수 있는 필터 서비스를 제공합니다. 'Demofilter'는 필터에 부여된 이름입니다.
  3. 이는 함수가 반환되는 AngularJS의 사용자 정의 필터가 정의되는 표준 방식입니다. 이 함수에는 사용자 정의 필터를 생성하기 위한 사용자 정의 코드가 포함되어 있습니다. 우리 함수에서는 뷰에서 필터로 전달되는 "Angular" 문자열을 가져와 여기에 "Tutorial" 문자열을 추가합니다.
  4. 컨트롤러에서 뷰로 전달된 멤버 변수에 Demofilter를 사용하고 있습니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

AngularJS에서 사용자 정의 필터 만들기

출력에서,

  • 사용자 정의 필터가 적용된 것을 볼 수 있으며
  • 멤버 변수 tutorial에 전달된 문자열 끝에 'Tutorial'이라는 단어가 추가되었습니다.

관련 기사

AngularJS의 소문자 필터

이 필터는 문자열 출력을 받아 문자열 형식을 지정하고 문자열의 모든 문자를 소문자로 표시합니다.

AngularJS를 소문자로 옵션을 사용하는 AngularJS 필터의 예를 살펴보겠습니다.

아래 예에서는 컨트롤러를 사용하여 범위 개체를 통해 뷰에 문자열을 보냅니다. 그런 다음 뷰에서 필터를 사용하여 문자열을 소문자로 변환합니다.

AngularJS의 소문자 필터

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

코드 설명

  1. 여기서는 "tutorialName"이라는 멤버 변수에 소문자와 대문자의 조합인 문자열을 전달하고 이를 범위 개체에 연결합니다. 전달되는 문자열의 값은 "AngularJS"입니다.
  2. 우리는 멤버 변수 “tutorialName”을 사용하고 필터 기호(|)를 넣습니다. 이는 필터를 사용하여 출력을 수정해야 함을 의미합니다. 그런 다음 소문자 키워드를 사용하여 내장 필터를 사용하여 전체 문자열을 소문자로 출력하도록 말합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

AngularJS의 소문자 필터

출력에서

  • 소문자와 대문자의 조합인 tutorialName 변수에 전달된 “AngularJS” 문자열이 실행된 것을 확인할 수 있습니다.
  • 실행 후 최종 출력은 위와 같이 소문자로 표시됩니다.

AngularJS의 대문자 필터

이 필터는 소문자 필터와 유사합니다. 차이점은 문자열 출력을 받아 문자열 형식을 지정하고 문자열의 모든 문자를 대문자로 표시한다는 것입니다.

소문자 옵션을 사용하여 대문자 필터 AngularJS의 예를 살펴보겠습니다.

아래 AngularJS 대문자화 예제에서는 컨트롤러를 사용하여 범위 객체를 통해 뷰에 문자열을 보냅니다. 그런 다음 뷰에서 필터를 사용하여 문자열을 대문자로 변환합니다.

AngularJS의 대문자 필터

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

코드 설명

  1. 여기서는 "tutorialName"이라는 멤버 변수에 소문자와 대문자 "Angular JS"의 조합인 문자열을 전달하고 이를 범위 개체에 연결합니다.
  2. 멤버 변수 “tutorialName”을 사용하고 필터 기호(|)를 넣었습니다. 이는 필터를 사용하여 출력을 수정해야 함을 의미합니다. 그런 다음 대문자 키워드를 사용하여 내장 필터를 사용하여 전체 문자열을 대문자로 출력하도록 말합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

AngularJS의 대문자 필터

출력에서,

  • 소문자와 대문자의 조합인 tutorialName 변수에 전달된 문자열이 모두 대문자로 출력된 것을 확인할 수 있습니다.

AngularJS의 숫자 필터

이 필터는 숫자 형식을 지정하고 숫자의 소수점 이하 자릿수에 제한을 적용할 수 있습니다.

숫자 옵션이 있는 AngularJS 필터의 예를 살펴보겠습니다.

아래 예에서

숫자 필터를 사용하여 소수점 이하 2자리로 제한하여 표시할 숫자 형식을 지정하는 방법을 보여드리고 싶었습니다.

컨트롤러를 사용하여 범위 개체를 통해 뷰에 숫자를 보냅니다. 그런 다음 뷰에서 필터를 사용하여 숫자 필터를 적용합니다.

AngularJS의 숫자 필터

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

코드 설명

  1. 여기서는 tutorialID라는 멤버 변수에 소수점 이하 자릿수가 더 큰 숫자를 전달하고 이를 범위 개체에 연결합니다.
  2. 멤버 변수 tutorialID를 사용하고 숫자 필터와 함께 필터 기호(|)를 넣습니다. 이제 숫자 2에서 두 개는 필터가 소수 자릿수를 2로 제한해야 함을 나타냅니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

AngularJS의 숫자 필터

출력에서,

  • 소수점이 많은 변수 tutorialID에 전달된 숫자는 2개의 필터가 적용되었기 때문에 소수점 이하 2자리로 제한되었음을 알 수 있습니다.

AngularJS의 통화 필터

이 필터는 통화 필터의 형식을 숫자로 지정합니다.

$와 같은 통화로 숫자를 표시하려는 경우 이 필터를 사용할 수 있다고 가정해 보겠습니다.

아래 예에서는 컨트롤러를 사용하여 범위 개체를 통해 뷰에 숫자를 보냅니다. 그런 다음 뷰의 필터를 사용하여 현재 필터를 적용합니다.

AngularJS의 통화 필터

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

코드 설명

  1. 여기서는 tutorialprice라는 멤버 변수에 숫자를 전달하고 이를 범위 개체에 연결합니다.
  2. 우리는 멤버 변수 tutorialprice를 사용하고 통화 필터와 함께 필터 기호(|)를 넣습니다. 적용되는 통화는 기기에 적용되는 언어 설정에 따라 다릅니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

AngularJS의 통화 필터

출력에서

  • tutorialprice 변수에 전달된 숫자에 통화 기호가 추가된 것을 볼 수 있습니다.
  • 우리의 경우 언어 설정이 영어(미국)이므로 통화로 $ 기호가 삽입됩니다.

AngularJS의 JSON 필터

이 필터는 JSON 입력과 유사하며 AngularJS JSON 필터를 적용하여 JSON으로 출력을 제공합니다.

아래 예에서는 컨트롤러를 사용하여 범위 개체를 통해 JSON 유형 개체를 뷰에 보냅니다. 그런 다음 뷰에서 필터를 사용하여 JSON 필터를 적용합니다.

AngularJS의 JSON 필터

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

코드 설명

  1. 여기서는 "tutorial"이라는 멤버 변수에 숫자를 전달하고 이를 범위 개체에 연결합니다. 이 멤버 변수에는 Tutorial ID:12 및 TutorialName:”Angular”의 JSON 유형 문자열이 포함되어 있습니다.
  2. 우리는 멤버 변수 튜토리얼을 사용하고 JSON 필터와 함께 필터 기호(|)를 넣습니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

AngularJS의 JSON 필터

출력에서,

  • JSON이 문자열과 같이 구문 분석되어 브라우저에 적절한 JSON 객체로 표시되는 것을 볼 수 있습니다.

제품 개요

  • 필터는 출력이 사용자에게 표시되는 방식을 변경하는 데 사용됩니다.
  • Angular는 문자열의 출력을 각각 소문자 및 대문자로 변경하는 소문자 및 대문자 필터와 같은 내장 필터를 제공합니다.
  • 숫자 필터를 사용하여 숫자에 표시할 소수점 자릿수를 지정하여 숫자가 표시되는 방식을 변경하는 기능도 있습니다.
  • 통화 필터를 사용하여 숫자에 통화 기호를 추가할 수도 있습니다.
  • JSON 특정 출력이 필요한 경우 각도는 문자열과 같은 JSON을 JSON 형식으로 필터링하기 위한 JSON 필터도 제공합니다.
  • 각도에 정의된 필터 중 어느 것도 충족하지 않는 요구 사항이 있는 경우 사용자 정의 필터를 만들고 사용자 정의 코드를 추가하여 필터에서 원하는 출력 유형을 결정할 수 있습니다.