我刚开始使用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/。
任何帮助将非常感激!
这里有一些错误:
该<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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句