web-dev-qa-db-ja.com

コントローラでフィルタを使用する方法

あなたが渡している引数に基づいてデータを返すフィルタ関数を書きました。私は私のコントローラーに同じ機能が欲しいのです。フィルター機能をコントローラーで再利用することは可能ですか？

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

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjsangular-filtersng-controller
626
sumanth

$ filter をあなたのコントローラーに注入する

function myCtrl($scope, $filter)
{
}

それからあなたがそのフィルタを使いたいところならどこでも、ちょうどそれをこのように使います：

$filter('filtername');

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

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

arg1はフィルタリングしたい配列、arg2はフィルタリングに使用したオブジェクトです。

1028
Prashanth Suriyanarayanan

@Prashanthによって提供された答えは正しいですが、同じことをするもっと簡単な方法があります。基本的には$filter依存関係を注入しそれを呼び出すという厄介な構文（$filter('filtername')(arg1,arg2);）を使用する代わりに、依存関係を注入することができます：filter nameとFilterサフィックス。

質問から例を挙げれば、次のように書くことができます。

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

どのような命名規則を使用していても、フィルタ名にFilterを追加する必要があります。fooは、fooFilterを呼び出すことによって参照されます。
fooFilterはfooFilterFilterを呼び出して参照されます。

247
pkozlowski.opensource

次のサンプルコードを使用して、角度コントローラ内の配列を名前でフィルタリングできます。これは以下の説明に基づいています。 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>
77
aamir sajjad

これは、Angularコントローラーでfilterを使用する別の例です。

$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.");

簡単ですね。

47
Mike Gledhill

これを行うには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);

});

注：これにより all yourフィルタにアクセスできます。

$filterをvariableに割り当てる

このオプションはfunctionのように$filterを使うことを可能にします。

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番目の使用をお勧めします。

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

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

コントローラメソッドの2番目の引数の名前は "$ filter"でなければならず、フィルタ機能のみがこの例で動作します。この例では、 "小文字"のフィルタを使用しました。

15
Ipog

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

このようなvalue-Descriptionの配列を得ます

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);
    // ....
}
12
NtSpeed

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

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

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

そしてコントローラ内部では $ filter serviceを注入することができます

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

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

AngularJsフィルターの例とデモ

7
Hazarapet Tunanyan

ビューから構文を反映したフィルタを評価する別の方法があります。呼び出しは毛深いですが、あなたはそれへのショートカットを構築することができます。文字列の構文は、ビューに表示されるものと同じであることが好きです。こんな感じです：

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

関数を arg2 in $ filter（ 'filtername'）（arg1、arg2）のように使用できるとは誰も述べていないようです。

例えば：

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

コントローラで$ filterを使用した簡単な日付の例は次のようになります。

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");

ここで説明したように - https://stackoverflow.com/a/20131782/262140

2
AVH

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

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

まず最初にコントローラに$ filterを注入して、ngSanitizeがアプリ内にロードされていることを確認します。

$filter('linky')(text, target, attributes)

angularjsのドキュメントを常にチェックしてください

1
serdarsenay

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

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

これは に応じてフィルタされたオブジェクトを返します - 条件

0
Code Spy