Question

我刚刚开始和Angular一起玩，我很难在这里理解某些事情。我想建立一个属于不同类别的产品列表。有些产品属于同一类别，如下所示：

$scope.products = [
  {'name': 'Product 1', 'cat':'Cat 1'},
  {'name': 'Product 2', 'cat':'Cat 2'},
  {'name': 'Product 3', 'cat':'Cat 2'},
  {'name': 'Product 4', 'cat':'Cat 3'},
  {'name': 'Product 5', 'cat':'Cat 3'},
  {'name': 'Product 6', 'cat':'Cat 2'},
];

由于AngularUI的独特过滤器，我能够创建一个<select>来合并相同的类别，以避免重复。这是代码：

<select ng-model="query" ng-options="c.cat for c in products | unique:'cat'">
    <option value="0">Default</option>
</select>

<ul>
    <li ng-repeat="c in products | filter:query">
        {{c.name}}
    </li>
</ul>

我想根据我选择的类别在列表中显示结果。但是当我尝试这样做时，列表中返回的唯一产品将是该类别中的第一个产品。我已经用我的问题创建了一个小提琴：http://jsfiddle.net/F7Hvq/3/。

任何帮助都会非常感激！

Answer 1

以下是一些错误：

<select>将选择整个产品。所以| filter:query将保留与产品匹配的东西，即数组中该类别的第一个产品。我建议你把它写成：
```
<select ng-model="query" ng-options="c.cat as c.cat for c in products | unique:'cat'">
```
...以便选择cat字段。
然后| filter:query不知道要过滤的属性;将其更改为| filter:{cat:query}

如果没有选择意味着没有过滤器，你将不得不做一些特别的事情;目前它将不匹配任何产品。请参阅小提琴：http://jsfiddle.net/n7ZCg/

Angular中的select和ng-repeat问题

1 个答案: