webentwicklung-frage-antwort-db.com.de

Verwendung von Parametern innerhalb des Filters in AngularJS

Ich möchte Parameter im Filter verwenden, wenn ich einige Arrays mit ng-repeat iteriere

Beispiel:

HTML-Teil:

<tr ng-repeat="user in users | filter:isActive">

JavaScript-Teil:

$scope.isActive = function(user) {
    return user.active === "1";
};

Aber ich möchte gerne filtern können

<tr ng-repeat="user in users | filter:isStatus('4')">

Aber es funktioniert nicht. Wie kann ich so etwas tun?

70
Vural Acar

UPDATE: Ich habe mir die Dokumentation wahrscheinlich nicht gut genug angesehen, aber Sie können den filter - Filter mit dieser Syntax (siehe diese Geige ) definitiv verwenden, um nach einer Eigenschaft auf der Objekte:

<tr ng-repeat="user in users | filter:{status:4}">

Hier ist meine ursprüngliche Antwort, falls es jemandem hilft:

Mit dem filter filter können Sie keinen Parameter übergeben, aber es gibt mindestens zwei Möglichkeiten, die Sie tun können.

1) Setzen Sie die Daten, nach denen Sie filtern möchten, in einer Gültigkeitsbereichsvariablen und referenzieren Sie diese in Ihrer Filterfunktion wie this fiddle .

JavaScript:

$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
                {name: 'second user', status: 2},
                {name: 'third user', status: 3}];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

Html:

<li ng-repeat="user in users | filter:isStatus">

OR

2) Erstellen Sie einen neuen Filter, der einen Parameter wie this fiddle aufnimmt.

JavaScript:

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].status == status)
              out.Push(input[i]);
      }      
    return out;
  };
});

Html:

<li ng-repeat="user in users | isStatus:3">

Beachten Sie, dass bei diesem Filter eine status -Eigenschaft in den Objekten des Arrays vorhanden ist, die möglicherweise weniger wiederverwendbar ist. Dies ist jedoch nur ein Beispiel. Sie können this lesen, um weitere Informationen zum Erstellen von Filtern zu erhalten.

121
Gloopy

Diese Frage ist fast identisch mit Argumente an anglejs Filter übergeben , auf die ich bereits geantwortet habe Aber ich werde hier eine weitere Antwort posten, nur damit die Leute es sehen.

Tatsächlich gibt es eine andere (möglicherweise bessere Lösung), bei der Sie den nativen "Filter" -Filter des Winkels verwenden und dennoch Argumente an Ihren benutzerdefinierten Filter übergeben können.

Betrachten Sie den folgenden Code:

    <li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

Damit dies funktioniert, definieren Sie Ihren Filter einfach wie folgt:

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

Dieser Ansatz ist vielseitiger, da Sie Werte vergleichen können, die tief im Objekt verschachtelt sind.

Checkout Polarität eines Winkels.js-Filters umkehren um zu sehen, wie Sie dies für andere nützliche Operationen mit Filter verwenden können.

47
Denis Pshenov

Wenn Sie einen benutzerdefinierten AngularJs-Filter erstellt haben, können Sie mehrere Parameter an Ihren Filter senden. Hier wird in der Vorlage verwendet

{{ variable | myFilter:arg1:arg2...  }}

und wenn Sie Filter in Ihrem Controller verwenden, erfahren Sie hier, wie Sie dies tun können

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

wenn Sie mehr mit Beispielen und Online-Demo benötigen, können Sie diese verwenden

AngularJs filtert Beispiele und Demo

0

Beispiel Ich habe eine Schülerliste wie folgt:

$scope.students = [  
   { name: 'Hai', age: 25, gender: 'boy' },  
   { name: 'Hai', age: 30, gender: 'girl' },  
   { name: 'Ho', age: 25, gender: 'boy' },  
   { name: 'Hoan', age: 40, gender: 'girl' },  
   { name: 'Hieu', age: 25, gender: 'boy' }  
 ];  

Ich möchte Studenten über Geschlecht als Jungen filtern und nach Namen filtern.

Als Erstes erstelle ich eine Funktion namens "filterbyboy" wie folgt:

$scope.filterbyboy = function (genderstr) {  
   if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
     return (genderstr = "")  
   else  
    return (genderstr = "boy");  
 };  

Erklärung: Wenn kein Filtername vorhanden ist, werden alle anderen Schüler nach Name und Geschlecht der Eingabe als "Junge" angezeigt.

Hier ist vollständiger HTMLcode und Demo Wie benutze und bediene ich in AngularJs Beispiel

0
Lewis Hai

Dies kann etwas irrelevant sein, aber wenn Sie versuchen, mehrere Filter mit benutzerdefinierten Funktionen anzuwenden, sollten Sie Folgendes überprüfen: https://github.com/tak215/angular-filter-manager

0
tsuz