Wie verwende ich einen Filter in einer Steuerung?

649

Ich habe eine Filterfunktion geschrieben, die Daten basierend auf dem Argument zurückgibt, das Sie übergeben. Ich möchte die gleiche Funktionalität in meinem Controller. Ist es möglich, die Filterfunktion in einer Steuerung wiederzuverwenden?

Folgendes habe ich bisher versucht:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjs  angular-filters  ng-controller 
— Sumanth
quelle
2
— Raza Ahmed

Antworten:

1051

Injizieren Sie $ filter in Ihren Controller

function myCtrl($scope, $filter)
{
}

Wo immer Sie diesen Filter verwenden möchten, verwenden Sie ihn einfach wie folgt:

$filter('filtername');

Wenn Sie Argumente an diesen Filter übergeben möchten, verwenden Sie separate Klammern:

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

Wo arg1ist das Array, nach dem Sie filtern möchten, und wo wird gefiltert arg2?

— JSAddict
quelle
21
Entschuldigung, Sir, ich verstehe immer noch nicht. Könnten Sie möglicherweise eine Jsfiddle erstellen, um zu zeigen, wie der Filterfunktionskörper definiert und wie er in eine HTML-Datei eingefügt wird?
— gm2008
34
@ gm2008 können Sie Zahlenfilter verwenden, um var anyNumber = $filter('number')(12.222222, 2);zu erhalten 12.22.
— Vinesh
20
+ Ich für die Beantwortung der Frage ... Wie lautete "Wie verwende ich einen Filter in einem Controller?"
— Shanimal
8
Ein Beispiel mit dem eingebauten Filter "Währung": $filter("currency")(price, "$", 2)Wenn Sie also einen Preis = 200 hätten, würde dieser Ausdruck "200,00 $" zurückgeben.
— Netsi1964
2
Die Antwort von @ pkozlowski.opensource ist besser als diese, weil sie "magische Strings" reduziert. Ein Vorteil: Was wäre, wenn dies in einem viel komplexeren Controller der Fall wäre und Sie den verwendeten Filter nicht einem Komponententest unterzogen hätten? Sie würden den Fehler nicht bemerken, wenn Sie $filter('filtter1')(2 t) verwenden. Wenn Sie jedoch filtter1FilterAngular injizieren, wird sich sofort beschweren, dass die Abhängigkeit nicht besteht.
— jkjustjoshing
253

Die Antwort von @Prashanth ist korrekt, aber es gibt noch einfachere Möglichkeiten, dasselbe zu tun. Anstatt die $filterAbhängigkeit zu injizieren und die umständliche Syntax zum Aufrufen von ( $filter('filtername')(arg1,arg2);) zu verwenden, kann die Abhängigkeit wie folgt eingefügt werden: Filtername plus FilterSuffix.

Ein Beispiel aus der Frage könnte man schreiben:

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

Es ist zu beachten, dass Sie Filteran den fooFilter
Filternamen anhängen müssen , unabhängig davon, welche Namenskonvention Sie verwenden: foo wird durch Aufrufen referenziert. FooFilter wird durch Aufrufen referenziertfooFilterFilter

— pkozlowski.opensource
quelle
38
Sicher ... aber ich muss noch einen Anwendungsfall finden, in dem Sie 10 Filter in eine Klasse
— einfügen
10
Nur um klar zu machen, dass dies keine "umständliche" JS-Syntax ist ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);
— Blindgaenger
13
@OZ_ was meinst du? Es funktioniert Minimierung oder nicht. Minimierung hat hier nichts zu tun, siehe diesen Plunk: plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview
— pkozlowski.opensource
2
Dies ist ideal für die Verwendung eines einzelnen Filters, was der Fall ist, auf den ich gestoßen bin.
— Matthew Fotzler
2
+1 Ich denke, die $ -Filtersyntax verbirgt Abhängigkeiten, was zu weniger wartbarem Code führt. Das "statische" Injizieren von Filtern ist die bessere Wahl.
— BiAiB
79

Mit dem folgenden Beispielcode können wir das Array im Winkelregler nach Namen filtern. Dies basiert auf der folgenden Beschreibung. 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>
— aamir sajjad
quelle
4
filterFilter (this.array, {name: 'Igor'}); Ist filterFilter ein Schlüsselwort oder was es die Daten automatisch herausfiltert und warum ['filterFilter', Funktion (filterFilter) {hier definiert! ?
— Suraj Rawat
Ein Plnkr mit weiteren Beispielen für diese Technik: plnkr.co/edit/icFurX?p=preview
— OzBob
Sehr hilfreich. Vielen Dank.
— Kushal Jayswal
48

Hier ist ein weiteres Beispiel für die Verwendung filterin einem Angular-Controller:

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

Einfach, hey?

— Mike Gledhill
quelle
6
Genau das brauchte ich, danke. Obwohl es anscheinend nicht darum geht. :)
— pvgoran
38

Es gibt drei Möglichkeiten, dies zu tun.

Angenommen, Sie haben den folgenden einfachen Filter, der eine Zeichenfolge in Großbuchstaben konvertiert, mit einem Parameter nur für das erste Zeichen.

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

Direkt durch $filter

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

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

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

});

Hinweis: Dadurch erhalten Sie Zugriff auf alle Ihre Filter.

Zuweisen $filterzu avariable

Mit dieser Option können Sie Folgendes verwenden: $filtera function.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Laden Sie nur eine bestimmte Filter

Sie können nur einen bestimmten Filter laden, indem Sie den Filternamen mit anhängen Filter.

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

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

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

});

Welche Sie verwenden, hängt von Ihren persönlichen Vorlieben ab, aber ich empfehle die dritte, da dies die am besten lesbare Option ist.

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

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

Der zweite Argumentname der Controller-Methode sollte "$ filter" sein, dann funktioniert in diesem Beispiel nur die Filterfunktionalität. In diesem Beispiel habe ich den Filter "Kleinbuchstaben" verwendet.

— Ipog
quelle
12

Ich habe ein anderes Beispiel, das ich für meinen Prozess gemacht habe:

Ich bekomme ein Array mit einer solchen Wertbeschreibung

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

in meinen 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';
    };
})

Dann ein Test var (Controller):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
— NtSpeed
quelle
Funktioniert das in anglejs 1.0.8? Weil es für mich nicht funktioniert ... sagt, $ Filter ist nicht definiert, selbst nachdem ich das in Controller hinzugefügt habe
— Shajin
7

Mit AngularJs können Sie Filter in Vorlagen oder in Controllern, Richtlinien usw. verwenden.

In der Vorlage können Sie diese Syntax verwenden

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

und innerhalb des Controllers können Sie den $ filter- Dienst injizieren

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

Wenn Sie mehr mit Demo-Beispiel benötigen, finden Sie hier einen Link

AngularJs Filterbeispiele und Demo

— Hazarapet Tunanyan
quelle
Anstiftung ist kein Wort. Meinst du spritzen?
— Kevin
oops.yea ich meine spritzen.
— Hazarapet Tunanyan
6

Es gibt eine andere Möglichkeit, Filter auszuwerten, die die Syntax aus den Ansichten widerspiegeln. Der Aufruf ist haarig, aber Sie können eine Verknüpfung dazu erstellen. Mir gefällt, dass die Syntax der Zeichenfolge mit der in einer Ansicht identisch ist. Sieht aus wie das:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
— Einfach
quelle
Das ist eigentlich sehr nützlich!
— DragonKnight
1
Das ist fantastisch, da ich so einen String übergeben kann, der genauso aussieht wie im Markup.
— Kevin
5

Es scheint, dass niemand erwähnt hat, dass Sie eine Funktion als arg2 in $ filter ('filtername') (arg1, arg2) verwenden können;

Zum Beispiel: 

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

Verwenden Sie den folgenden Code, wenn Sie mehrere Bedingungen anstelle eines einzelnen Werts im Javascript-Winkelfilter hinzufügen möchten:

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

Wenn Sie ein Objekt im Controller filtern möchten, versuchen Sie dies

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

Dies gibt ein gefiltertes Objekt gemäß der if-Bedingung zurück

— Code Spy
quelle
0

Wiederverwenden eines Angular.js-Filters - Ansicht / Controller

Diese Lösung behandelt die Wiederverwendung von Winkelfiltern. Dies ist eine weitere Möglichkeit, Daten zu filtern, und Google hat mich hier gelandet, als ich solche benötigte. und ich teile gerne.

Anwendungsfall

Wenn Sie bereits filtern, z. B. in einer ng-Wiederholung in Ihrer Ansicht (wie unten), haben Sie möglicherweise einen Filter in der Steuerung wie folgt definiert. Und dann können Sie wie in den letzten Beispielen wiederverwenden.

Beispiel für die Verwendung von Filtern - Gefilterte Wiederholung in der Ansicht

<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>

Beispiel für die Definition eines Winkelfilters

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

Das Konzept hier ist also, dass Sie bereits einen Filter verwenden, der für Ihre Ansicht erstellt wurde, und dann erkennen, dass Sie ihn auch in Ihrem Controller verwenden möchten.

Filterfunktion Verwendung innerhalb des Controllers Beispiel 1

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

Verwendung der Filterfunktion innerhalb des Controllers Beispiel 2

Zeigen Sie eine Schaltfläche nur an, wenn mit dem vorherigen Filter keine Duplikate gefunden wurden.

HTML-Taste

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

Schaltfläche Ein- / Ausblenden

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

Einige mögen diese Version der Filterung als einfach empfinden, und es handelt sich um eine Angular.js-Option.

Der optionale Komparatorparameter "true", der in der Ansicht und im Funktionsaufruf $ filter verwendet wird, gibt an, dass Sie einen strengen Vergleich wünschen. Wenn Sie dies weglassen, können Sie über mehrere Spalten nach Werten suchen.

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

— Greg
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.