AngularJS에서 사용자 지정 필터를 만드는 방법은 무엇입니까?

아래 목록과 같이 ng-repeat 지시문과 함께 필터를 사용한 적이 있습니까?

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

그렇다면 AngularJS 애플리케이션에서 필터를 사용한 것입니다. AngularJS는 검색과 같은 많은 내장 지시문을 제공합니다. 필요한 경우 AngularJS를 사용하면 이 게시물에서 살펴볼 사용자 지정 필터를 만들 수도 있습니다.

AngularJS는 사용자 정의 필터를 생성할 수 있는 간단한 API를 제공합니다. 컨트롤러를 생성하기 위해 app.controller()를 사용하고 모듈을 생성하기 위해 app.module()을 사용한다는 것을 기억할 것입니다. 정확히 같은 방식으로 AngularJS는 AngularJS에서 사용자 정의 필터를 생성하기 위해 angular.filter API를 제공했습니다.

사용자 지정 필터는 다음 구문을 사용하여 만들 수 있습니다.

사용자 지정 필터를 만들려면 다음 단계를 수행해야 합니다.

• 사용자 정의 필터 이름과 함수를 app.filter()에 입력 매개변수로 전달하여 app.filter를 사용하여 필터를 만듭니다
• App.filter() will return a function
• 반환된 함수는 다양한 선택적 입력 매개 변수를 사용할 수 있습니다
• 반환된 함수에는 사용자 지정 필터 코드가 있으며 출력을 반환합니다.

매우 간단한 사용자 지정 필터를 만드는 것부터 시작하겠습니다. 이 사용자 지정 필터를 문자열에 적용할 수 있으며 대문자의 경우 각 문자가 포함된 문자열을 반환합니다.

MyApp.filter('toUpperCase', function () {
    return function (input)
    {
        var output = "";       
        output = input.toUpperCase();
        return output;
    }
})

아래 목록과 같이 보기에서 toUpperCase 사용자 지정 필터를 사용할 수 있습니다.

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toUpperCase}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

사용자 지정 필터의 이름은 대소문자를 구분한다는 점을 명심해야 합니다. 위에서 만든 보기는 아래 목록과 같이 컨트롤러에서 데이터를 읽습니다.

MyApp.controller("ProductController", function ($scope) {
    $scope.products = [
		{ 'name': 'pen', 'price': '200' },

		{ 'name': 'pencil', 'price': '400' },

		{ 'name': 'book', 'price': '2400' },

		{ 'name': 'ball', 'price': '400' },

		{ 'name': 'eraser', 'price': '1200' },
    ];
})

이제 아래 이미지와 같이 뷰에서 대문자 케이스로 렌더링된 제품 이름을 가져옵니다.

MyApp.filter('toPositionUpperCase', function () {
 
    return function (input,position)
    {
        var output = [];       
        var capLetter = input.charAt(position).toUpperCase();
        for (var i = 0; i < input.length; i++) {
 
            if (i == position) {
                output.push(capLetter);
            } else {
                output.push(input[i]);
            }
 
        }
        output = output.join('');
        return output;
    }
})

아래 목록과 같이 보기에서 toPositionUpperCase 사용자 지정 필터를 사용할 수 있습니다. 보시다시피 콜론을 사용하여 입력 매개변수를 사용자 지정 필터에 전달하고 있습니다.

<div ng-controller="ProductController">
    <table class="table">              
        <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toPositionUpperCase:1}}</td>
            <td>{{a.price}}</td>
        </tr>
    </table>
</div>

아래 이미지와 같이 보기에서 대문자로 렌더링된 제품 이름의 두 번째 문자를 얻을 수 있습니다.

이 기사를 마치기 전에 항목 컬렉션에 적용될 사용자 지정 필터를 만들어 보겠습니다. 제품 목록에서 주어진 가격보다 큰 모든 제품을 필터링하고 싶다고 가정해 보겠습니다. 아래 목록과 같이 이 사용자 지정 필터를 작성할 수 있습니다.

MyApp.filter('priceGreaterThan', function () {
 
    return function (input, price) {
        var output = [];
        if (isNaN(price)) {
 
            output = input;
        }
        else {
            angular.forEach(input, function (item) {
 
                if (item.price > price) {
                    output.push(item)
                }
            });
        }
        return output;
    }
})

아래 목록에 표시된 대로 보기에서 사용자 지정 필터를 사용할 수 있습니다. 입력 유형 텍스트 상자에서 price 매개변수를 전달합니다.

<h1>With Custom Filter</h1>
       
<div ng-controller="ProductController">
   <input type="number" class="form-control" placeholder="Search here" ng-model="priceterm" />
   <br/>
   <table class="table">
       <tr ng-repeat="b in products|priceGreaterThan:priceterm">
           <td>{{b.name}}</td>
           <td>{{b.price}}</td>
       </tr>
   </table>
</div>

이를 통해 아래 이미지와 같이 뷰에 필터링된 배열을 얻을 수 있습니다.

자, 여기 있습니다 – 이것이 사용자 지정 필터를 만드는 방법입니다! 그것은 쉽습니다 – 그것들은 하나의 입력과 선택적 매개 변수를 사용하여 함수를 반환하는 함수일 뿐입니다. 즐겁게 읽으셨기를 바랍니다!

Infragistics jQuery& HTML5 컨트롤을 사용하여 브라우저, 장치 및 플랫폼에 제한 없이 반응이 빠른 최신 웹 애플리케이션을 제공합니다. 지금 무료 평가판을 다운로드하고 그들의 힘을 실제로 확인하십시오!