Wie filtere ich ein Array mit AngularJS und verwende eine Eigenschaft des gefilterten Objekts als das ng-Modell-Attribut?

104

Wenn ich ein Array von Objekten habe und das Angular-Modell an eine Eigenschaft eines der Elemente basierend auf einem Filter binden möchte, wie mache ich das? Ich kann besser mit einem konkreten Beispiel erläutert:Wie filtere ich ein Array mit AngularJS und verwende eine Eigenschaft des gefilterten Objekts als das ng-Modell-Attribut?

HTML:

<!DOCTYPE html> 
<html ng-app> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
     <meta charset=utf-8 /> 
     <title>JS Bin</title> 
    </head> 
    <body ng-controller="MyCtrl"> 
     <input ng-model="results.year"> 
     <input ng-model="results.subjects.title | filter:{grade:'C'}"> 
    </body> 
</html>

Controller:

function MyCtrl($scope) { 
    $scope.results = { 
    year:2013, 
    subjects:[ 
     {title:'English',grade:'A'}, 
     {title:'Maths',grade:'A'}, 
     {title:'Science',grade:'B'}, 
     {title:'Geography',grade:'C'} 
    ] 
    }; 
}

JSBin: http://jsbin.com/adisax/1/edit

ich mit einem dem zweiten Eingang zu dem Thema filtern möge Klasse 'C', aber ich möchte das Modell nicht an die Klasse binden; Ich möchte es an den Titel des Subjekts binden, das Grad 'C' hat.

Ist dies möglich, und wenn ja, wie wird es gemacht?

Quelle

2013-07-30 Bernhard Hofmann

103

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}"> 
    <input ng-model="subject.title" /> 
</div>

Quelle

2013-07-30 11:50:50

ich sehe, wo Sie mit, dass gehen, aber ich habe nicht wirklich einen Repeater will. Die Eigenschaft, nach der ich tatsächlich filtern werde, ist eine Identitätsspalte, also ist sie einzigartig. Aber ich sehe, dass dies der richtige Weg wäre, das generische Problem zu lösen. –

Dies ist ein Tutorial für italienische Leute :) http://dev.stasbranger.com/post/77190983049/lista-di-filtri-in-angularjs –

das war sehr hilfreich, und für inverse (alles andere als C), dies würde funktionieren: 'filter: {grade: '!' + 'C'}' – pulkitsinghal

140

Sie können den "Filter" Filter in Ihrem Controller verwenden, um alle "C" Grade zu erhalten. Wenn Sie das erste Element des Ergebnisarrays abrufen, erhalten Sie den Titel des Subjekts mit der Note "C".

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

Das gleiche mit einfacher ES6:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]

Quelle

2013-07-30 13:00:16 Oliver

Es tut mir leid, dass ich dem zweiten Filter nicht folge ("Filter") Kannst du das ein wenig mehr erklären? – Winnemucca

@stevek Das ist der Name des Filters. Die Methode filter() gibt Ihnen den Filter. Es ist nur ein Filter, der Filter genannt wird, weil er ein Array filtert. Es würde so aussehen mit dem Währungsfilter: $ Filter ('Währung') (Betrag, Symbol, FraktionGröße) Überprüfen Sie die Dokumente hier: https://docs.angularjs.org/api/ng/filter – Oliver

Hier ist eine modifizierte JSBin mit einer Arbeitsprobe:

http://jsbin.com/sezamuja/1/edit

Hier ist, was ich tat, mit Filter in der Eingabe:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

Quelle

2014-04-30 11:49:23 lukeatdesignworks

Dies sollte sei die akzeptierte Antwort. –

Das ist das einzig Wahre. Das ist die Kraft. Das ist der Weg. Ich ging damit und jetzt bin ich glücklich. – user1576978

wenn Sie eine separate Liste der Ergebnisse in der Steuerung Sie könnten anwenden einen Filter

function MyCtrl($scope, filterFilter) { 
    $scope.results = { 
    year:2013, 
    subjects:[ 
     {title:'English',grade:'A'}, 
     {title:'Maths',grade:'A'}, 
     {title:'Science',grade:'B'}, 
     {title:'Geography',grade:'C'} 
    ] 
    }; 
    //create a filtered array of results 
    //with grade 'C' or subjects that have been failed 
    $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'}); 
}

Dann Sie verweisen können failedSubjects die gleiche Art und Weise würden Sie verweisen auf die schaffen wollte Ergebnisse Objekt

können Sie mehr darüber lesen Sie hier https://docs.angularjs.org/guide/filter

da diese Antwort Winkel haben die Dokumentation aktualisiert sie jetzt

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey); 
// becomes 
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

Quelle

2014-11-19 00:27:07 Kieran

Was ist FilterFilter? Ist es irgendeine Dienstleistung oder Richtlinie? Wo ist der Code für filterFilter? – Mou

ist es ein Winkelservice. Sehen Sie sich das erste Beispiel im obigen Link an. (in der Datei scripts.js) – Kieran

obwohl sie die Dokumentation filterFilter geändert haben funktioniert immer noch .. – Kieran

Sie können auch Verwendung Funktionen mit $filter('filter') Aufruf der Filter empfehlen:

var foo = $filter('filter')($scope.results.subjects, function (item) { 
    return item.grade !== 'A'; 
});

Quelle

2017-02-03 21:50:56 Nelu

Bitte beachten Sie, wenn Sie verwenden $ -Filter wie folgt:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

und Sie haben zufällig eine andere Klasse für, Oh ich weiß nicht, CC oder AC oder C + oder CCC es zieht sie an. Sie brauchen eine Voraussetzung für eine exakte Übereinstimmung anhängen:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

Das bin ich wirklich getötet, als ich in einigen Provision Details wie diese ziehen:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

nur in für einen Fehler aufgerufen, weil es Ziehen Sie die Kommissions-ID 56 anstelle von 6 ein.

Hinzufügen der wahren Kräfte eine genaue Übereinstimmung.

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

doch noch, ziehe ich diese (I Typoskript verwenden, damit die "Let" und =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
      return item.commission_type_id === 6; 
      })[0];

ich, dass da irgendwann auf der Straße, ich könnte wollen um mehr Informationen aus diesen gefilterten Daten zu erhalten, usw. ... wenn die Funktion direkt in der Art ist, lässt sie die Haube offen.

Quelle

2017-03-23 20:12:29

Ich hatte den gleichen Fehler wie Sie, danke für den Hinweis mit dritten booleschen Parameter. War mir dessen nicht bewusst. –

Anwendung gleiche Filter in HTML mit mehreren Spalten, nur Beispiel:

variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

Quelle

2018-01-11 09:52:04

Wie filtere ich ein Array mit AngularJS und verwende eine Eigenschaft des gefilterten Objekts als das ng-Modell-Attribut?

Antwort

Verwandte Themen