2016-04-01 5 views
-1

Ich ging durch Beispiele in einem der Angular JS-Bücher, die ich habe und stieß auf etwas, das ich nicht klar verstehe. Es hat mit benutzerdefiniertem Filter und ng-repeat zu tun. Hier sind die Codes"Schlüssel ist nicht definiert" in AngularJS benutzerdefinierte Filterfunktion

Der folgende Code ist der Controller an HTML Body Tag angehängt.

angular.module("sportsStore").controller("sportsStoreCtrl", function ($scope) { 
$scope.data = { 
    products: [ 
     { 
      name: "Product #1", 
      description: "A product", 
      category: "Category #1", 
      price: 100 
     }, 
     { 
      name: "Product #2", 
      description: "A product", 
      category: "Category #1", 
      price: 100 
     }, 
     { 
      name: "Product #3", 
      description: "A product", 
      category: "Category #2", 
      price: 210 
     }, 
     { 
      name: "Product #4", 
      description: "A product", 
      category: "Category #3", 
      price: 202 
     } 
    ] 
}; 

});

Der Code für den benutzerdefinierten Filter ist

angular.module("customFilters", []).filter("unique", function() { 
    return function (data, propertyName) { 
     if (angular.isArray(data) && angular.isString(propertyName)) { 
      var results = []; 
      var keys = {}; 
      for (var i = 0; i < data.length; i++) { 
       var val = data[i][propertyName]; 
       if (angular.isUndefined(keys[val])) { 
        keys[val] = true; 
        results.push(val); 
       } 
      } 
      return results; 
     } else { 
      return data; 
     } 
    } 
}); 

Was ist der benutzerdefinierte Filter im Grunde tun soll eine Liste von Kategorien in $ scope.data.products erstellen.

Der Code funktioniert einwandfrei. Was ich nicht verstehe, ist die Rolle von "var keys = {};" in den benutzerdefinierten Filterfunktionen.

Was ist die Absicht, Variablen "Schlüssel" zu haben und den Wert ihrer Eigenschaften auf wahr zu setzen?

+0

haben Sie versucht, es ohne 'keys [val] = true' zu ​​laufen, um zu sehen, welchen Unterschied es macht? Ich kann den Titel Ihrer Frage nicht in Ihrer Frage finden – Jorg

Antwort

0

Der Filter führt die Daten aus, die von $ scope.data und der Eigenschaft "category" bereitgestellt werden. Es wird nach eindeutigen Kategorien gesucht, wobei nur die erste Instanz einer Kategorie angezeigt wird.

Während die Schleife ausgeführt wird, liest sie den Wert für die "Kategorie" -Schlüssel auf jedem Datenindex.

Das keys-Objekt fungiert als Tracker, um zu verfolgen, welche Werte zum Ergebnis-Array hinzugefügt wurden.

Durch Festlegen eines Werts für das keys -Objekt wird festgelegt, ob der Wert erneut erfüllt wird und die if-Bedingung nicht erfüllt wird und nicht zum Ergebnisarray hinzugefügt wird.

Mit anderen Worten, es wird auf Produkt # 1 ausgeführt, liest die Kategorie als Kategorie # 1, fügt sie dem Ergebnis-Array hinzu und erstellt einen Schlüssel ["Kategorie # 1"] Wert von True.
Als nächstes, Produkt # 2, extrahiert es den Kategoriewert von "Kategorie # 1". Kategorie 1 befindet sich bereits auf dem Schlüsselobjekt, daher wird Produkt 2 nicht zum Ergebnis hinzugefügt.
Als nächstes, Produkt # 3, extrahiert es die Kategorie Wert von "Kategorie # 2", sieht, dass es nicht in der Schlüssel-Objekt ist, so fügt es die "Kategorie # 2" zu den Ergebnissen.

Die resultierende Anzeige sollte die Produkt # 1, # 3 und # 4 Info sein, wenn ich mich nicht irre.

Durch Entfernen der Tasten [val] = true werden alle Produkte angezeigt.

Verwandte Themen