獨特的ng選項不起作用

我有以下汽車陣列。我試圖在這個數組上使用ng-options，只顯示顏色類別作爲鏈接以及「所有顏色」選項。獨特的ng選項不起作用

所有，紅，黃，藍

<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 
});

我beleve遇到的問題可能incuding的angularJS UI模塊。如果我將'[]'更改爲'['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' 
     } 
    ] 
]

來源

2016-04-15 hss

爲什麼你認爲這裏有什麼不對？你的陣列有2個紅色，2個藍色1個紅色。所以當你刪除唯一性時，它會顯示所有的數據。如果不是，它會出錯。 –

對此感到抱歉。如果我從語法中保留「| unique：color」，那麼我會收到以下錯誤：angular.js：13424錯誤：[$ injector：unpr]未知的提供程序：uniqueFilterProvider < - uniqueFilter – hss

對不起。如果我從語法中保留「| unique：color」，那麼我會收到以下錯誤：angular.js：13424錯誤：[$ injector：unpr]未知提供者：uniqueFilterProvider < - uniqueFilter。我已經包含了ui-filters.js（https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js）來使用獨特的過濾器功能，但它並沒有採用它。 – hss

語法沒有問題。問題在於腳本文件的加載順序。我在app.js腳本之後加載了AngularJS UI腳本。它應該是其他方式。

來源

2016-04-15 19:41:06 hss

如果綁定你的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，但它是那麼優雅。

希望我解決了你的問題。

來源

2016-04-15 16:06:14 Lulylulu

謝謝，這工作太但是我想用angularJS UI來解決這個問題。這看起來像我的語法是正確的，但該模塊沒有加載到應用程序。 – hss

首先你的數據集的格式不正確。一個數組沒有名稱 - 值對。

例如，你的數據集是這樣的。

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

來源

2016-04-15 16:39:58

獨特的ng選項不起作用

回答

相關問題