一意のng-optionsは機能しません

Question

私は車のために次の配列を持っています。私はこの配列のng-optionsを使用して、 "all colors"オプションとともにリンクとしての色カテゴリのみを表示しようとしています。

すべて、私が削除した場合

<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> 

、赤、黄、青「|ユニーク： 『色』」構文を、私は繰り返しですべての色を取得します。

構文から "| unique：color"を保持すると、エラー：angular.js：13424エラー：[$ injector：unpr]不明なプロバイダ：uniqueFilterProvider < - uniqueFilter。 独自のフィルタ機能を使用するために私のhome.htmlにui-filters.js（https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js）を含めましたが、それはそれを拾いません。 はまた、私の主な角度モジュールは、このようなものです：

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

私は問題がangularJS UIモジュールをincudingされる可能性がありますbeleve。 '[]'を '[' ui.filters ']に変更すると、モジュールを認識しません。

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

構文に問題はありませんでした。問題は、スクリプト・ファイルのロード順序です。 app.jsスクリプトの後にAngularJS UIスクリプトをロードしていました。それは別の方法であったはずです。

Answer 2

あなたは車のアレイ上ごselectをバインドする場合は、黄色と二回青たら、あなたは、二回赤いフォームの車1と2を持っているので、色が複数回表示されることが普通です。あなたは何ができるか

、あなたの車に基づいて色のコレクションを作成し、すべての項目のオプションを追加している：ここでは

はlodashを使った例です：

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

そして、あなたのHTML内：

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

他のソリューションは、あなたの<options>にng-repeatを使用することですが、それはあまりエレガントです。

私はあなたの問題を正しく抱いています。

Answer 3

まず、あなたのデータセットは正しい形式ではありません。配列には名前と値のペアがありません。

たとえば、データセットは次のようなものです。

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

これは、正しい形式の配列ではありません。

あなたのデータセットはこれが好きです。

{ 
       "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' 
        } 
       ] 
      };