ng-Optionen mit einzigartigen funktioniert nicht

Question

Ich habe folgende Array für Autos. Ich versuche, ng-Optionen für dieses Array zu verwenden, um nur Farbkategorie als Link zusammen mit der Option "alle Farben" anzuzeigen.

Alle, rot, gelb, blau

<div ng-repeat="client in clients"> 
    <label>{{client.Name}}</label> 
    <select ng-model="opt" ng-options="i.color for i in client.cars | unique: 'color'"> 
     <option value="">All</option> 
     <option value="">{{i.color}}</option> 
    </select> 
</div> 

Wenn ich entferne die "| einzigartig: 'Farbe'" Syntax dann ich alle Farben mit Wiederholungen zu bekommen.

Wenn ich "| unique: color" aus der Syntax behalten, dann erhalte ich folgenden Fehler: angular.js: 13424 Fehler: [$ injector: unpr] Unbekannter Provider: uniqueFilterProvider < - uniqueFilter. Ich habe ui-filters.js (https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js) bei meiner home.html eingeschlossen, um die einzigartige Filterfunktionalität zu verwenden, aber es hebt es nicht auf. auch mein Hauptwinkelmodul ist wie folgt:

angular.module("cartApp", []) 
.controller('fs',function($scope,$http){ 
//code here 
}); 

ich beleve das Problem könnte das AngularJS UI-Modul werden incuding. Wenn ich die '[]' zu '[' ui.filters '] ändere, erkennt es das Modul nicht.

clients: 
[ 
    "Name":'test', 
    "age":34, 
    cars: 
    [ 
     { 
      "carid": 1, 
      "carname": 'camry', 
      "color": 'red' 
     }, 
     { 
      "carid": 2, 
      "carname": 'mustang', 
      "color": 'red' 
     }, 
     { 
      "carid": 3, 
      "carname": 'landcruiser', 
      "color": 'yellow' 
     }, 
     { 
      "carid": 4, 
      "carname": 'focus', 
      "color": 'blue' 
     }, 
     { 
      "carid": 5, 
      "carname": 'civic', 
      "color": 'blue' 
     } 
    ] 
] 

Answer 1

Es war nichts falsch an der Syntax. Das Problem war das Laden der Sequenz von Skriptdateien. Ich habe AngularJS UI-Skript nach dem Skript app.js geladen. Es hätte anders herum sein müssen.

Answer 2

Wenn Sie binden Ihre select auf dem Auto Array, haben Sie zweimal die rote Form Auto 1 und 2, einmal die gelbe und zweimal heiterem Himmel, so normal es ist, dass die Farben mehr als einmal.

Was Sie tun können, ist eine Sammlung von Farben basierend auf Ihren Autos, erstellen und die alle Elemente Option hinzufügen:

Hier ist ein Beispiel unter Verwendung von lodash:

_.forEach(clients, function(client) { 
    // add the available colors for each client 
    client.colors = _.uniq(_.map(clients.car, 'color')); 
    client.colors.unshift('all');} 
); 

Und in Ihrem HTML:

<div ng-repeat="client in clients"> 
    <label>{{client.Name}}</label> 
    <select ng-model="selectedColor" ng-options="color for color in colors"></select> 
</div> 

Die andere Lösung ist ng-repeat auf <options> zu verwenden, aber es ist weniger elegant.

Ich hoffe, ich habe dein Problem richtig.

Answer 3

Zunächst einmal ist Ihr Datensatz nicht in korrekter Form. Ein Array hat kein Name-Wert-Paar.

Zum Beispiel ist Ihr Datensatz in etwa so.

$scope.Data = [one: "one"]; 

Welches ist nicht eine korrekte Form eines Arrays.

Ihr Datensatz sollte dies mögen.

{ 
       "Name":"test", 
       "age":"34", 
       "cars": 
       [ 
        { 
         "carid": 1, 
         "carname": 'camry', 
         "color": 'red' 
        }, 
        { 
         "carid": 2, 
         "carname": 'mustang', 
         "color": 'red' 
        }, 
        { 
         "carid": 3, 
         "carname": 'landcruiser', 
         "color": 'yellow' 
        }, 
        { 
         "carid": 4, 
         "carname": 'focus', 
         "color": 'blue' 
        }, 
        { 
         "carid": 5, 
         "carname": 'civic', 
         "color": 'blue' 
        } 
       ] 
      };