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

Question

我有以下汽车数组。我正在尝试在此数组上使用 ng-options 仅将颜色类别显示为 link 以及 "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'”语法，那么我会得到所有重复的颜色。

如果我在语法中保留“|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 模块也是这样的：

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

Answer 1

如果您将 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 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'
                    }
                ]
            };

Answer 3

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

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

ng-options with unique does not work

angularjs

unique

ng-options

angularjs-ui-utils