Angular中的select和ng-repeat问题

罗南

我刚开始使用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/

任何帮助将非常感激!

尼科斯(Nikos Paraskevopoulos)

这里有一些错误:

  • <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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular ng-repeat问题

来自分类Dev

遇到ons-list和angular ng-repeat的问题

来自分类Dev

Angular ng-repeat创建表问题

来自分类Dev

ng-repeat问题和html表

来自分类Dev

OnsenUI列表和ng-repeat问题

来自分类Dev

angular js 中的 ng-repeat 问题,$scope 与视图绑定

来自分类Dev

ng-repeat中的orderBy和$ Index问题

来自分类Dev

AngularJs。ng-repeat问题

来自分类Dev

嵌套ng-repeat的问题

来自分类Dev

AngularJS ng-repeat colspan rowpan问题

来自分类Dev

AngularJS ng-repeat的问题-空白结果

来自分类Dev

我的ng-repeat出了点问题

来自分类Dev

ng-repeat指令的动画问题

来自分类Dev

使“ ng-repeat”重复出现的问题。

来自分类Dev

Angularjs for 循环与 ng-repeat 奇怪的问题

来自分类Dev

angular ng-repeat 作为静态内容(性能问题)

来自分类Dev

Angularjs和Jade ng-repeat嵌套问题

来自分类Dev

删除对象中的重复键的AngularJS ng-repeat问题

来自分类Dev

Angular中的ng-repeat动态模型和脏检查

来自分类Dev

ng-repeat和angular中的图元过滤数组

来自分类Dev

Angular中的ng-repeat动态模型和脏检查

来自分类Dev

ng-repeat:添加新元素的 ng-model 问题

来自分类Dev

ng-repeat重复问题,如果没有任何重复

来自分类Dev

如何使用ng-repeat指令解决性能问题?

来自分类Dev

无法解决角度路由/ ng-repeat的问题。

来自分类Dev

ng-repeat 的指令-控制器通信问题

来自分类Dev

结合使用ng-repeat和Bootstrap和AngularJS的结构问题

来自分类Dev

由于范围问题,ng-click无法在ng-repeat中触发

来自分类Dev

AngularJS-使用服务和ng-repeat时的参考问题