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 14

このメソッドは、ng-repeat内で自分のパラメーターをフィルターに渡せないという奇妙な問題も解決しました。私が何をしても、彼らはインデックスやコレクション全体として戻ってきました。このreturnメソッドを実行することで、パラメーターを渡し、元の要素を引き続きロードできました。
Dennis Smolek 2015年

この回答は、フィルター関数にパラメーターとして$ scope変数を渡すことができなかった私の問題を解決しました。最高のソリューション。賛成です!
valafar 2017

これを2回以上賛成できたとしたら、それがSOの歴史の中で最も賛成された答えであったことを確認するでしょう。これは何年もの間私のたわごとを悩ませてきました...そして、私は(現在2歳の)答えを見つけます...信じられないほど本当にありがとう
PKD

2019年もまだ役に立ちます!どうもありがとう。
アシロン

76

私が理解していることから、フィルター関数に引数を渡すことはできません( 'filter'フィルターを使用する場合)。あなたがしなければならないことは、次のようなカスタムフィルターを書くことです:

.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;
};

ありがとうございます!名前をスコープに保存してもうまくいきません。同じページに同じデータの3つのリストがあり、さまざまな状態(または名前)でフィルタリングされています。
シェイプシフター2012

「Adam」(JSFiddleを参照)を動的に設定するものはありますか?AngularでngModelとカスタムフィルターを組み合わせるのは不可能だと思います(私はそれが意図的だと思います)
Rolf

フィルターのパラメーターを並べ替えることはできますか?たとえば、アイテムをフィルターの2番目のパラメーターに渡しますか?
Pooya 14

この例では、マークアップは{{items | weDontLike: 'thenameyoudontlike'}} ...今それを取得するには、フィドルにアクセスする必要があります。また、カスタムフィルターに複数のパラメーターを渡すことができることにも注意してください{{items | weDontLike: 'thename':['I am'、 'an array']: 'など'}}カスタムフィルターに引数を追加して、それらにアクセスできます。
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 2013年

5
ここでも配列を渡すことができますfilter:['Adam', 'john']
iConnor

6
jsfiddleリンクが壊れています。
セレグウェトリン2014年

4
!Adamは史上最悪の名前です
Ben Wheeler 14

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

2

pkozlowski.opensourceの回答を拡張し、JavaScript array's組み込みフィルターメソッドを使用すると、洗練されたソリューションは次のようになります。

.filter('weDontLike', function(){
    return function(items, name){
        return items.filter(function(item) {
            return item.name != name;
        });
    };
});

これがjsfiddle リンクです。

配列フィルターの詳細はこちら


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.