具有唯一性的 ng-options 不起作用答案

【问题标题】：ng-options with unique does not work具有唯一性的 ng-options 不起作用
【发布时间】：2016-04-15 15:48:25
【问题描述】：

我有以下汽车数组。我正在尝试在此数组上使用 ng-options 仅将颜色类别显示为链接以及“所有颜色”选项。

全部，红、黄、蓝

<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 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 模块。如果我将 '[]' 更改为 '['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'
        }
    ]
]

【问题讨论】：

为什么你认为这里有问题？您的阵列有 2 个红色，2 个蓝色 1 个红色。因此，当您删除 uniqueness 时，它会显示所有数据。如果不这样做就会出错。
很抱歉给您带来了困惑。如果我从语法中保留“|唯一：颜色”，那么我会收到以下错误：angular.js:13424 错误：[$injector:unpr] 未知提供者：uniqueFilterProvider
很抱歉给您带来了困惑。如果我从语法中保留“|唯一：颜色”，那么我会收到以下错误：angular.js:13424 错误：[$injector:unpr] 未知提供者：uniqueFilterProvider cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/…) 以使用独特的过滤器功能，但它没有使用它。

标签： angularjs unique ng-options angularjs-ui-utils

【解决方案1】：

如果您将select 绑定在汽车数组上，则汽车 1 和 2 的红色是汽车 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，但它不太优雅。

希望我能解决你的问题。

【讨论】：

谢谢，这也可以，但我正在尝试使用 angularJS UI 来解决这个问题。看起来我的语法是正确的，但模块没有加载到应用程序中。

【解决方案2】：

首先，您的数据集格式不正确。数组没有名称-值对。

例如，您的数据集是这样的。

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

【讨论】：

【解决方案3】：

语法没有错。问题是脚本文件的加载顺序。我在 app.js 脚本之后加载 AngularJS UI 脚本。应该是其他方式。

【讨论】：