AngularJS에서 필터 내의 파라미터를 사용하는 방법

AngularJS에서 필터 내의 파라미터를 사용하는 방법

ng-repeat를 사용하여 일부 어레이를 반복할 때 필터에 파라미터를 사용합니다.

예:

HTML 부품:

<tr ng-repeat="user in users | filter:isActive">

JavaScript 부품:

$scope.isActive = function(user) {
    return user.active === "1";
};

근데 필터는 이렇게 쓰고 싶어요.

<tr ng-repeat="user in users | filter:isStatus('4')">

근데 안 되네.제가 어떻게 그런 일을 할 수 있을까요?

업데이트: 매뉴얼을 제대로 보지 못한 것 같습니다만, 필터 필터는 반드시 다음 구문을 사용하여 오브젝트의 속성을 기준으로 필터링할 수 있습니다.

<tr ng-repeat="user in users | filter:{status:4}">

---

다른 사람에게 도움이 될 경우에 대비하여 다음과 같이 답변합니다.

필터 필터를 사용하면 매개 변수를 전달할 수 없지만 최소한 두 가지 작업을 수행할 수 있습니다.

1) Scope 변수에서 필터링할 데이터를 설정하고 필터에서 이 바이올린과 같이 기능하는 데이터를 참조합니다.

JavaScript:

$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
                {name: 'second user', status: 2},
                {name: 'third user', status: 3}];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

HTML:

<li ng-repeat="user in users | filter:isStatus">

또는

2) 이 바이올린과 같은 파라미터를 도입하는 새로운 필터를 만듭니다.

JavaScript:

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].status == status)
              out.push(input[i]);
      }      
    return out;
  };
});

HTML:

<li ng-repeat="user in users | isStatus:3">

이 필터는, 다음과 같은 것이 있는 것을 전제로 하고 있습니다.status이 경우 재사용이 어려울 수 있지만 이는 예에 불과합니다.필터 작성에 대한 자세한 내용은 이 문서를 참조하십시오.

이 질문은 이미 답변한 angularjs 필터에 인수를 전달하는 것과 거의 동일합니다.하지만 사람들이 볼 수 있도록 여기에 답을 하나 더 올릴게요.

실제로 앵글의 네이티브 '필터' 필터를 사용하면서도 인수를 커스텀필터에 전달할 수 있는 (더 나은 솔루션)이 있습니다.

다음 코드를 고려합니다.

    <li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

이 작업을 수행하려면 필터를 다음과 같이 정의하면 됩니다.

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

이 접근방식은 오브젝트 깊숙이 중첩된 값을 비교할 수 있기 때문에 더욱 다양합니다.

Checkout angular.js 필터의 역극성을 확인하여 필터로 다른 유용한 작업에 사용할 수 있는 방법을 확인합니다.

AngularJs 사용자 정의 필터를 만든 경우 필터에 여러 개의 매개 변수를 보낼 수 있습니다.템플릿 사용 현황입니다.

{{ variable | myFilter:arg1:arg2...  }}

컨트롤러 내부에서 필터를 사용하면 다음과 같이 할 수 있습니다.

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2, ...);
})

예시와 온라인 데모를 통해 더 많은 것이 필요한 경우, 이것을 사용할 수 있습니다.

AngularJs 필터 예제 및 데모

이는 다소 관련이 없을 수 있지만 커스텀 기능을 사용하여 여러 필터를 적용하려는 경우 https://github.com/tak215/angular-filter-manager을 참조하십시오.

예: 다음과 같은 학생 목록이 있습니다.

$scope.students = [  
   { name: 'Hai', age: 25, gender: 'boy' },  
   { name: 'Hai', age: 30, gender: 'girl' },  
   { name: 'Ho', age: 25, gender: 'boy' },  
   { name: 'Hoan', age: 40, gender: 'girl' },  
   { name: 'Hieu', age: 25, gender: 'boy' }  
 ];  

나는 성별을 통해 학생을 남학생으로 선별하고 그들의 이름을 기준으로 필터링하고 싶다.

첫 번째는 다음과 같이 "filterbyboy"라는 이름의 함수를 만듭니다.

$scope.filterbyboy = function (genderstr) {  
   if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
     return (genderstr = "")  
   else  
    return (genderstr = "boy");  
 };  

설명: 필터 이름이 아닌 경우 입력 이름과 성별을 기준으로 모든 학생을 '소년'으로 표시합니다.

여기 완전한 HTML 코드와 AngularJs의 사용 방법과 연산자의 예가 있습니다.

언급URL : https://stackoverflow.com/questions/11996857/how-to-use-parameters-within-the-filter-in-angularjs