In Angular muss ich Objekte in einem Array suchen


114

In Angular habe ich ein Objekt im Gültigkeitsbereich, das viele Objekte zurückgibt. Jeder hat eine ID (diese ist in einer Flatfile gespeichert, also keine DB, und ich scheine nicht in der Lage zu sein, Benutzer ng-resource)

In meinem Controller:

$scope.fish = [
    {category:'freshwater', id:'1', name: 'trout', more:'false'},
    {category:'freshwater', id:'2', name:'bass', more:'false'}
];

Meiner Ansicht nach habe ich zusätzliche Informationen zu den Fischen, die standardmäßig mit ng-showmehr ausgeblendet sind. Wenn ich jedoch auf die einfache Registerkarte Mehr anzeigen klicke, möchte ich die Funktion aufrufen showdetails(fish.fish_id). Meine Funktion würde ungefähr so ​​aussehen:

$scope.showdetails = function(fish_id) {  
    var fish = $scope.fish.get({id: fish_id});
    fish.more = true;
}

In der Ansicht werden nun die weiteren Details angezeigt. Nach dem Durchsuchen der Dokumentation kann ich jedoch nicht herausfinden, wie dieses fishArray durchsucht werden soll .

Wie frage ich das Array ab? Und wie rufe ich in der Konsole den Debugger auf, damit ich das $scopeObjekt zum Spielen habe?

Antworten:


95

Ich weiß, ob dir das ein bisschen helfen kann.

Hier ist etwas, das ich versucht habe, für Sie zu simulieren.

Kasse der jsFiddle;)

http://jsfiddle.net/migontech/gbW8Z/5/

Erstellt einen Filter, den Sie auch in 'ng-repeat' verwenden können.

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

Verwendung in der Steuerung:

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]

     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);

Wenn Sie Fragen haben, lassen Sie es mich einfach wissen.


Da ich neu in Angular und Javascript bin, verstehe ich die Bedeutung von '+' in der Anweisung "if (+ input [i] .id == + id) {" nicht. Können Sie uns bitte Ihre Gedanken mitteilen?
Harshavardhan

Perfekte Lösung !!
Anil Kumar Ram

1
Ich denke, die "+ Eingabe [i] .id == + id" stellt sicher, dass Sie Zahlen vergleichen. Sie können also 1 oder '1' an den $ -Filter übergeben, und er würde sich genauso verhalten. Ich verwende alphanumerische IDs, also habe ich sie in "input [i] .id === id" geändert
Axel Zehden

211

Sie können den vorhandenen $ filter-Dienst verwenden. Ich habe die Geige über http://jsfiddle.net/gbW8Z/12/ aktualisiert.

 $scope.showdetails = function(fish_id) {
     var found = $filter('filter')($scope.fish, {id: fish_id}, true);
     if (found.length) {
         $scope.selected = JSON.stringify(found[0]);
     } else {
         $scope.selected = 'Not found';
     }
 }

Die eckige Dokumentation finden Sie hier http://docs.angularjs.org/api/ng.filter:filter


2
sehr hilfreich - Als ich Angular lerne, wird mir klar, dass ich aufhören muss, zuerst an jQuery-Funktionen zu denken (ich habe versucht, $ .grep dazu zu bringen) - stattdessen war die Verwendung dieses $ filter-Dienstes genau das, was ich brauchte!
Bobby

2
Bessere Antwort, da keine eigenen Filter geschrieben werden müssen.
stevenw00

Könnten Sie Details hinzufügen, was $scope.selectedist / enthält. Durch eine Schnellsuche nach ausgewählten habe ich ng-selected/ ngSelected gefunden : If the expression is truthy, then special attribute "selected" will be set on the element . Ist das das gleiche? Was macht es in Ihrem Beispiel? Danke
surfmuggle

1
Genial !. Macht es einfach. Vielen Dank
Bharath

2
Vergessen Sie nicht, den $ filter-Dienst zu Ihrem Controller hinzuzufügen. dh: app.controller ('mainController', ['$ filter', Funktion ($ filter) {// $ filter kann jetzt verwendet werden.}]);
Lucas Reppe Welander

22

Um @ migontechs Antwort und auch seiner Adresse seinen Kommentar hinzuzufügen, dass Sie es "wahrscheinlich allgemeiner machen könnten", ist hier eine Möglichkeit, dies zu tun. Im Folgenden können Sie nach jeder Eigenschaft suchen:

.filter('getByProperty', function() {
    return function(propertyName, propertyValue, collection) {
        var i=0, len=collection.length;
        for (; i<len; i++) {
            if (collection[i][propertyName] == +propertyValue) {
                return collection[i];
            }
        }
        return null;
    }
});

Der Aufruf zum Filtern würde dann werden:

var found = $filter('getByProperty')('id', fish_id, $scope.fish);

Beachten Sie, dass ich den unären (+) Operator entfernt habe, um stringbasierte Übereinstimmungen zu ermöglichen ...


In Anbetracht der Dokumentation, dass dies der einzige Anwendungsfall für ng-init ist, würde ich sagen, dass dies definitiv der Angular-Weg ist, dies zu tun.
Bluehallu

Sehr leicht verständliches Beispiel und sehr hilfreich
rainabba

13

Eine schmutzige und einfache Lösung könnte aussehen

$scope.showdetails = function(fish_id) {
    angular.forEach($scope.fish, function(fish, key) {
        fish.more = fish.id == fish_id;
    });
};

5
Warum ist das eine schmutzige Lösung?
Trialcoder

5
Meine Vermutung wäre, dass es vielleicht eine Milliarde
RedactedProfile

6
Es würde noch mehr Datensätze in anderen Sprachen geben. Ich meine, es gibt viele Fische in C ++. (Oh halt die Klappe ... ich werde gehen und mich selbst abstimmen .. !!)
Mike Gledhill


7

Ihre Lösungen sind korrekt, aber unnötig kompliziert. Sie können die reine Javascript-Filterfunktion verwenden . Das ist dein Modell:

     $scope.fishes = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}];

Und das ist deine Funktion:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter({id : fish_id});
         return found;
     };

Sie können auch den Ausdruck verwenden:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter(function(fish){ return fish.id === fish_id });
         return found;
     };

Mehr zu dieser Funktion: LINK


4

Ich habe diesen Thread gesehen, wollte aber nach IDs suchen, die nicht zu meiner Suche passen. Code dafür:

found = $filter('filter')($scope.fish, {id: '!fish_id'}, false);

Das hat bei mir funktioniert. Einfach, glatt, leicht zu testen. Vielen Dank!
Kalpesh Panchal
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.