angularjs - Angular 中的 select 和 ng-repeat 问题

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

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

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

我想根据我选择的类别在列表中显示结果。但是当我尝试这样做时，列表中返回的唯一产品将是类别中的第一个。我为我的问题创建了一个 fiddle : 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 field 。

然后是| filter:query不知道通过什么属性过滤；将其更改为 | filter:{cat:query}

你将不得不做一些特别的事情，如果没有选择就意味着没有过滤器；目前它不会匹配任何产品。见 fiddle : http://jsfiddle.net/n7ZCg/