AngularJS链接选择 [英] AngularJS chaining select

查看:167
本文介绍了AngularJS链接选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想实现一个链接的选择,但链都不能正常工作。

I'm trying to implement that chained select, but chains aren't working properly.

http://plnkr.co/edit/ndm7PFGK8akdaHra7Fdm?p=$p$ PVIEW

我想要什么,需要:如选择ALPARGATAS作为类别时,与选择的上市品牌,类别应仍处于选中状态为ALPARGATAS或选择时,卡尔文·克莱恩作为品牌,并选择任何列出的类别,品牌应该还是选择 Calvin Klein的。

What I want, need: e.g. when selecting 'alpargatas' as category, and with any listed brand selected, the category should be still selected as 'alpargatas' or when selecting 'Calvin Klein' as brand, and with any listed category selected, the brand should be still selected as 'Calvin Klein'.

任何解决方案,提示或建议?韩国社交协会提前

Any solution, tip or advice?! Tks in advance

推荐答案

您需要使用过滤器以正确的顺序。

You need to use filter in correct order.

有关类别下拉菜单


  1. 品牌过滤器添加过滤器:{品牌:filterObject.brand}://如此严格的方式传递true

  2. 唯一过滤像独特的:'类'

  3. 和最后一个排序依据过滤像排序依据:'类'

  1. add a filter by brand like filter:{brand: filterObject.brand}: true//pass true for strict mode
  2. then the unique filter like unique: 'category'
  3. and last the orderBy filter like orderBy:'category'

HTML ,它看起来像

<select ng-model="filterObject.category" 
        ng-options="c.category as c.category for c in shoes|filter:{brand: filterObject.brand}: true| unique: 'category'| orderBy:'category'">
<option value="" ng-value="undefined">-- Category:</option>

品牌下拉菜单

<select ng-model="filterObject.brand" 
        ng-options="b.brand as b.brand for b in shoes|filter:{category: filterObject.category}: true| unique: 'brand'| orderBy:'brand'">
<option value="" ng-value="undefined">-- Brand:</option>

看这两个下拉菜单是绑定你的主数据源 $ scope.shoes ,所以你不需要在您的控制器额外的过滤器。

Look both dropdowns are bind with your main data source $scope.shoes so you don't need the additional filter in your controller.

检查更新的 普拉克

check the updated plunk

注意作为@ M59提到你不应该删除,当你正在寻找一个答案您的文章。

Note As @m59 mentioned you shouldn't delete your post when you are looking for an answer.

这篇关于AngularJS链接选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆