コントローラーでフィルターを使用するには?


649

渡した引数に基づいてデータを返すフィルター関数を作成しました。私のコントローラーにも同じ機能が必要です。フィルター機能をコントローラーで再利用することは可能ですか?

これは私がこれまでに試したことです:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

回答:


1051

$ filterをコントローラーに注入する

function myCtrl($scope, $filter)
{
}

次に、そのフィルターを使用する場所はどこでも、次のように使用します。

$filter('filtername');

そのフィルターに引数を渡したい場合は、別々の括弧を使用してください:

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

arg1は、フィルタリングする配列であり、フィルタリングにarg2使用されるオブジェクトです。


21
申し訳ありませんが、サー、私はまだ理解していません。Jsfiddleを作成して、フィルター関数の本体を定義する方法と、それをHTMLファイルに挿入する方法を示すことができますか?
gm2008

34
@ gm2008のようvar anyNumber = $filter('number')(12.222222, 2);に数値フィルターを使用できます12.22
vinesh 2014

20
+私は質問に答えてくれました...「コントローラーでフィルターを使用する方法は?」
Shanimal 2015

8
フィルターに組み込まれた「通貨」の例:$filter("currency")(price, "$", 2)したがって、価格= 200の場合、その式は「$ 200.00」を返します。
Netsi1964 2015年

2
@ pkozlowski.opensourceの答えは、「マジックストリング」を減らすため、これよりも優れています。1つの利点-これがはるかに複雑なコントローラーにあり、使用されているフィルターの単体テストに失敗した場合はどうなりますか?$filter('filtter1')(2 t)を使用してもエラーに気付かないでしょう。ただし、filtter1FilterAngular を注入すると、依存関係が存在しないとすぐに文句が表示されます。
jkjustjoshing 2015年

253

@Prashanthが提供する回答は正しいですが、同じことを行う簡単な方法もあります。基本的に、$filter依存関係を$filter('filtername')(arg1,arg2);挿入してそれを呼び出すという厄介な構文を使用する代わりに()、依存関係を挿入できます:フィルター名とFilterサフィックス。

質問から例をとると、次のように書くことができます:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

使用Filterしている命名規則に関係なく、フィルター名に追加する必要があることに注意してくださいfooFilter
。fooはfooFilter を呼び出して参照され、fooFilterはfooFilterFilter


38
もちろん、1つのクラスに10個のフィルタを挿入したいユースケースはまだ見つかりません...そのようなクラスはおそらく単一責任の原則に違反します...
pkozlowski.opensource

10
明確にするために、これは「厄介な」JS構文ではないことを示しています…var fooFilter = $ filter( 'foo'); fooFilter(arg1、arg2);
blindgaenger 2013年

13
@OZ_どういう意味?それはミニファイをするかしないかです。縮小はここでは何もしません。このプランクを
p=

2
これは、私が遭遇したケースである単一のフィルターを使用するのに理想的です。
マシューフォッツラー、2014年

2
+1 $ filter構文は依存関係を隠すため、コードの保守性が低下すると思います。「静的に」フィルターを注入することは、より良い選択です。
BiAiB 2015

79

次のサンプルコードを使用して、角度コントローラーの配列を名前でフィルター処理できます。これは以下の説明に基づいています。 http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter(this.array、{name: 'Igor'});

JS:

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>

4
filterFilter(this.array、{name: 'Igor'}); filterFilterは、キーワード、またはキーワードによって自動的にデータが除外された理由と、['filterFilter'、function(filterFilter){ここで定義されたものです!?
suraj rawat 2015年

このテクニックの例をさらに含むPlnkr:plnkr.co/edit/icFurX
p=

非常に役立ちます。ありがとう。
Kushal Jayswal 2017

48

filterAngularコントローラで使用する別の例を次に示します。

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");

シンプルですね。


6
これはまさに私が必要としていたことです、ありがとう。どうやらこれは問題についてのものではありませんが。:)
pvgoran 2015

38

これには3つの方法があります。

文字列を大文字に変換する次の単純なフィルターがあり、最初の文字のみのパラメーターがあるとします。

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

直接 $filter

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

注:これにより、すべてのフィルターにアクセスできます。


割り当て$filterAへvariable

このオプションを使用すると、の$filterように使用できますfunction

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

特定のだけをロードする Filter

フィルタ名にを追加すると、特定のフィルタのみをロードできますFilter

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

どちらを使用するかは個人的な好みになりますが、最も読みやすいオプションであるため、3番目を使用することをお勧めします。


15
function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

コントローラーメソッドの2番目の引数名は "$ filter"である必要があります。この場合、フィルター機能のみがこの例で機能します。この例では、「小文字」のフィルターを使用しています。


12

私は私のプロセスのために作った別の例があります:

このような値の説明を持つ配列を取得します

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

私のFilters.jsで:

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})

次に、テスト変数(コントローラー):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}

これはangularjs 1.0.8で動作しますか?cozそれは私のために機能していません...コントローラに追加した後でも$ filterが定義されていません
shajin

7

AngularJsを使用すると、テンプレート内またはコントローラー、ディレクティブ内などでフィルターを使用できます。

テンプレートでは、この構文を使用できます

{{ variable | MyFilter: ... : ... }}

コントローラーの内部では、$ filterサービスの注入を使用できます

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

デモの例がもっと必要な場合は、ここにリンクがあります

AngularJsフィルターの例とデモ


誘惑することは言葉ではありません。注射するということですか?
kevinc 2017

oops.yea私は注射を意味します。
Hazarapet Tunanyan 2017

6

ビューから構文を反映するフィルターを評価する別の方法があります。呼び出しは複雑ですが、そのショートカットを作成できます。文字列の構文がビューにあるものと同じであることを気に入っています。このように見えます:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

それは実際に非常に便利です!
DragonKnight 2017

1
マークアップと同じように見える文字列を渡すことができるので、これは素晴らしいです。
kevinc 2017

5

誰もがあなたがとしての機能を使用できることを言及していないようだarg2の中で $フィルタ(「FILTERNAME」)(ARG1、ARG2)。

例えば:

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});


1

JavaScript角度フィルターの単一の値ではなく、複数の条件を追加する場合は、以下のコードを使用します。

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)


1

コントローラでオブジェクトフィルタリングしたい場合は、これを試してください

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

これは、if条件に従ってフィルタリングされたオブジェクトを返します


0

Angular.jsフィルターの再利用-ビュー/コントローラー

このソリューションは、角度フィルターの再利用をカバーしています。これはデータをフィルタリングするためのもう1つの方法であり、必要なときにGoogleがここに到達しました。共有したいです。

使用事例

ビューでng-repeatを使用して(以下のように)既にフィルタリングしている場合は、以下のようにコントローラーでフィルターを定義した可能性があります。そして、最後の例のように再利用できます。

フィルターの使用例-ビューでのフィルターされた繰り返し

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

角度フィルター定義の例

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

したがって、ここでの概念は、ビュー用に作成されたフィルターをすでに使用しており、コントローラーでもそれを使用したいことに気づくということです。

コントローラーの例1でのフィルター関数の使用

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

コントローラーの例2でのフィルター関数の使用

前のフィルターを使用して、重複が見つからない場合にのみボタンを表示します。

HTMLボタン

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

ボタンの表示/非表示

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

一部のユーザーは、このバージョンのフィルタリングを簡単に見つけることができ、これはAngular.jsオプションです。

ビューと$ filter関数呼び出しで使用されるオプションのコンパレータパラメータ "true"は、厳密な比較が必要であることを指定します。省略すると、複数の列で値を検索できます。

https://docs.angularjs.org/api/ng/filter/filter

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.