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

发布时间：2020-12-17 17:18:28 所属栏目：安全来源：网络整理

导读：我刚刚开始和Angular一起玩,而我在这里很难理解某些事情.我想建立一个属于不同类别的产品列表.有些产品属于同一类别,如下所示： $scope.products = [ {'name': 'Product 1','cat':'Cat 1'},{'name': 'Product 2','cat':'Cat 2'},{'name': 'Product 3',{'name

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

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

我能够创建一个< 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'">

…以便选择猫场.
>然后是filter：查询不知道通过哪个属性进行过滤;将其改为|过滤器：{猫：查询}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!