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>

我想根据我选择的类别在列表中显示结果.但是当我尝试这样做时,列表中返回的唯一产品将是该类别中的第一个产品.我用我的问题创建了一个小提琴: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/