angularjs 필터에 인수 전달


99

임의의 이름으로 필터링 할 수 있도록 필터 함수에 인수를 전달할 수 있습니까?

같은 것

$scope.weDontLike = function(item, name) {
    console.log(arguments);
    return item.name != name;
};

답변:


223

실제로 각도의 기본 '필터'필터를 사용하고 여전히 사용자 정의 필터에 인수를 전달할 수있는 또 다른 (아마 더 나은 솔루션)이 있습니다.

다음 코드를 고려하십시오.

<div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

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

$scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

여기에서 볼 수 있듯이 weDontLike는 실제로 해당 범위에 매개 변수가있는 다른 함수와 필터에서 가져온 원래 항목을 반환합니다.

이 작업을 수행 할 수 있다는 사실을 깨닫는 데 2 ​​일이 걸렸습니다. 아직이 솔루션을 본 적이 없습니다.

체크 아웃 angular.js 필터의 역 극성은 당신이 필터와 다른 유용한 작업이 사용할 수있는 방법을 볼 수 있습니다.


필터에 여러 인수가 필요한 경우 여러 인수를 사용 하여 Angular.js 필터를 어떻게 호출하나요?를 참조하세요.
nh2 2014

이 방법은 또한 ng-repeat 내부에서 내 매개 변수를 필터에 전달할 수없는 이상한 문제를 해결했습니다. 내가 무엇을 하던지 그들은 색인과 전체 컬렉션으로 계속 돌아 왔습니다. 이 반환 메서드를 수행하여 매개 변수를 전달하고 원래 요소를로드 할 수있었습니다.
Dennis Smolek 2015 년

이 답변은 $ scope 변수를 필터 함수에 매개 변수로 전달할 수없는 문제를 해결했습니다. 최고의 솔루션. 찬성!
valafar

내가 이것을 두 번 이상 찬성 할 수 있다면, 나는 그것이 SO 역사상 가장 많은 찬성 응답을 받았는지 확신 할 것입니다. 이것은 몇 년 동안 나를 괴롭 혔습니다 ... 그리고 나는 (현재 2 살짜리) 대답을 찾았습니다 ... 정말 감사합니다.
PKD

2019 년에도 여전히 유용합니다! 감사합니다.
ashilon

76

내가 이해 한 바에 따르면 필터 함수에 인수를 전달할 수 없습니다 ( '필터'필터를 사용할 때). 당신이해야 할 일은 다음과 같이 사용자 정의 필터를 작성하는 것입니다.

.filter('weDontLike', function(){

return function(items, name){

    var arrayToReturn = [];        
    for (var i=0; i<items.length; i++){
        if (items[i].name != name) {
            arrayToReturn.push(items[i]);
        }
    }

    return arrayToReturn;
};

작동하는 jsFiddle은 다음과 같습니다. http://jsfiddle.net/pkozlowski_opensource/myr4a/1/

사용자 지정 필터를 작성하지 않는 다른 간단한 대안은 범위에서 필터링 할 이름을 저장 한 다음 다음과 같이 작성하는 것입니다.

$scope.weDontLike = function(item) {
  return item.name != $scope.name;
};

정말 감사합니다! 범위에 이름을 저장하는 것은 다른 상태 (또는 이름)로 필터링하는 동일한 페이지에 동일한 데이터의 세 목록이 있으므로 잘 작동하지 않습니다.
shapeshifter

'Adam'(JSFiddle 참조)을 동적으로 설정하는 것이 있습니까? Angular에서 ngModel과 사용자 정의 필터를 결합하는 것은 불가능한 것 같습니다 (고의적으로 생각합니다).
Rolf

필터의 매개 변수를 재정렬 할 수 있습니까? 예를 들어 항목을 필터의 두 번째 매개 변수에 전달 하시겠습니까?
Pooya

이 예에서 마크 업은 {{items | weDontLike : 'thenameyoudontlike'}} ... 지금 당장 바이올린을 켜야합니다. 또한 여러 매개 변수를 사용자 정의 필터 {{items | weDontLike : 'thename': [ 'I am', 'an array'] : 'and so on'}} 사용자 지정 필터에 더 많은 인수를 추가하여 액세스 할 수 있습니다.
Benjamin Conant 2015

62

실제로 매개 변수 ( http://docs.angularjs.org/api/ng.filter:filter )를 전달할 수 있으며이를위한 사용자 지정 함수가 필요하지 않습니다. HTML을 아래와 같이 다시 작성하면 작동합니다.

<div ng:app>
 <div ng-controller="HelloCntl">
 <ul>
    <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
        <span>{{friend.name}}</span>
        <span>{{friend.phone}}</span>
    </li>
 </ul>
 </div>
</div>

http://jsfiddle.net/ZfGx4/59/


8
예. 참고 사항-누군가의 이름이 '! Adam'이면 {name : '!! Adam'}처럼됩니다.
honzajde

5
여기에서도 이와 같이 배열을 전달할 수 있습니다filter:['Adam', 'john']
iConnor

6
jsfiddle 링크가 끊어졌습니다.
Seregwethrin 2014 년

4
! Adam은 최악의 이름입니다
Ben Wheeler

6
Not-Not-Adam은 분명히 더 나쁩니다.
2014

30

템플릿에서 간단하게 할 수 있습니다.

<span ng-cloak>{{amount |firstFiler:'firstArgument':'secondArgument' }}</span>

필터에서

angular.module("app")
.filter("firstFiler",function(){

    console.log("filter loads");
    return function(items, firstArgument,secondArgument){
        console.log("item is ",items); // it is value upon which you have to filter
        console.log("firstArgument is ",firstArgument);
        console.log("secondArgument ",secondArgument);

        return "hello";
    }
    });

이것이 최고의 답변입니다. 동적 개체와 함께 작동합니다. 이것은 받아 들여진 대답이어야합니다.
abelabbesnabi


1

각도 필터에 여러 인수를 전달할 수 있습니다!

내 각도 앱 및 앱 수준 변수 정의-

var app = angular.module('filterApp',[]);
app.value('test_obj', {'TEST' : 'test be check se'});

필터는 다음과 같습니다.

app.filter('testFilter', [ 'test_obj', function(test_obj) {
    function test_filter_function(key, dynamic_data) {
      if(dynamic_data){
        var temp = test_obj[key]; 
        for(var property in dynamic_data){
            temp = temp.replace(property, dynamic_data[property]);
        }
        return temp;
      }
      else{
        return test_obj[key] || key;
      }

    }
    test_filter_function.$stateful = true;
    return test_filter_function;
  }]);

그리고 HTML에서 다음과 같은 데이터를 보냅니다.

<span ng-bind="'TEST' | testFilter: { 'be': val, 'se': value2 }"></span>

여기에서 필터에 JSON 객체를 보냅니다. 문자열이나 숫자와 같은 모든 종류의 데이터를 보낼 수도 있습니다.

또한 동적 개수의 인수를 filter에 전달할 수 있습니다.이 경우 인수 를 사용 하여 해당 인수를 가져와야합니다.

작동하는 데모를 보려면 여기로 이동하십시오- 각도 필터에 여러 인수 전달


0

당신은 단순히 사용할 수 있습니다 | filter:yourFunction:arg

<div ng-repeat="group in groups | filter:weDontLike:group">...</div>

그리고 js에서

$scope.weDontLike = function(group) {
//here your condition/criteria
return !!group 
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.