2014-04-17 19 views
7

ich einige Daten im JSON-Format bekommen, die Räume in der einige der Tasten hat:AngularJS ngRepeat orderBy wenn Eigenschaft Schlüsselräume hat

[ 
    { 
     "PlainKey": "SomeValue", 
     "Spaced Key": "SomeValue" 
    }, 
    { 
     "PlainKey": "SomeValue2", 
     "Spaced Key": "SomeValue2" 
    } 
] 

Dieses irgendwann passiert:

$http.get('https://dl.dropboxusercontent.com/u/80497/htmlTesting/properties/credits.properties' + '?callback=JSON_CALLBACK').then(function (data) { 
      $scope.credits = data.data; 
     }, function (error) { 
      $scope.errorOccured = true; 
      console.log("Error:"); 
      console.log(error); 
     }); 

und dann ng-repeat wird verwendet, um es anzuzeigen, mit der Bestellung:

<select ng-model="corder"> 
    <option value="PlainKey">Plain Key</option> 
    <option value="Spaced Key">Spaced Key</option> 
</select> 

<li ng-repeat="credit in credits | orderBy:corder" > 
..... 
</li> 

dies nicht funktioniert (ich eine e xception) (Die PlainKey funktioniert, weil keine Leerzeichen vorhanden sind).

Ich habe auch versucht, die Werte in ' setzen:

<select ng-model="corder"> 
    <option value="'PlainKey'">Plain Key</option> 
    <option value="'Spaced Key'">Spaced Key</option> 
</select> 

Dies scheint die Reihenfolge zu ändern, aber nicht richtig.

Was fehlt mir?

Danke!

+0

Enclosing 'Spaced Key' mit einfachen Anführungszeichen bewirkt, dass 'orderBy' mit dem Schlüssel' 'Spaced Key'' nach einer Objekteigenschaft sucht, wobei die Anführungszeichen im actu enthalten sind Al Name der Eigenschaft. Daher erwartet es etwas wie $ scope.credits [0] ['' Spaced Key ''], auf das zugegriffen werden kann. Da dies nicht verfügbar ist, sehen Sie das inkonsistente Verhalten. – miqid

+0

@miqid Okay, Danke. Wie würden Sie in diesem Szenario nach "Spaced Key" sortieren? – Ben

+1

Sie könnten stattdessen 'orderBy' mit einer Prädikatsortierfunktion versehen (im Gegensatz zu einem Eigenschaftsnamen, nach dem sortiert werden soll). Hier ist ein [Plunker] (http://plnkr.co/edit/Mwe2xu26c1KHeT4KhTDg?p=preview) um zu demonstrieren, was ich meine. – miqid

Antwort

7

Kommentare erschien ich bin auch so ist es als eine Antwort zu helfen:

Eine Möglichkeit, Artikel mit Leerzeichen im Objekteigenschaftsnamen zu sortieren, ist ein Prädikat Sortierfunktion in orderBy anstelle des Namens Objekteigenschaft Angabe passieren . Die entsprechenden Änderungen insbesondere:

HTML:

<li ng-repeat="credit in credits | orderBy:predicate"> 

JS:

$scope.predicate = function(val) { 
    // $scope.corder corresponds to the object property name to sort by 
    return val[$scope.corder]; 
} 

Demonstration Plunker.

+0

Immer, wenn ich ein Prädikat wie dieses als Filter und keine Funktion in meinem Controller verwende, bekomme ich Ergebnisse, die fast zufällig sortiert erscheinen. Jedes Mal, wenn die Bestellung ausgeführt wird, wird die Bestellung gemischt. –

10

einfachste Weg, umgeben nur einen Feldnamen mit UTF8-Code für Anführungszeichen:

HTML

<li ng-repeat="item in items | orderBy:'\u0022Spaced Key\u0022'"> 

JS

$scope.orderKey = '\u0022Spaced Key\u0022'; 
+3

Schön! Das ist die beste Antwort, denke ich. – bioball

Verwandte Themen