Question

我有以下汽车阵列。我试图在这个数组上使用ng-options只显示颜色类别作为链接以及＆＃34;所有颜色＆＃34;选项。

全部，红色，黄色，蓝色

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

如果我删除＆＃34; |独特：＆＃39;颜色＆＃39;＆＃34;语法然后我得到重复的所有颜色。

如果我保持＆＃34; |独特：颜色＆＃34;从语法，然后我收到以下错误：angular.js：13424错误：[$ injector：unpr]未知提供者：uniqueFilterProvider＆lt; - 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模块。如果我更改了＆＃39; []＆＃39;到＆＃39; [＆＃39; ui.filters＆＃39;]然后它无法识别模块。

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>

另一个解决方案是在ng-repeat上使用<options>，但不太优雅。

希望我能解决你的问题。

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不起作用

3 个答案: