AngularJs的层叠式下拉菜单

Cascading dropdowns with AngularJs with Select Distinct

本文关键字：下拉菜单 AngularJs      更新时间：2023-09-26

我有一个页面，我在上面输出一个汽车列表。这个列表中的结果来自一个Json文件。

这是我的Json的一个例子: 
[
  {
    "id": "1590",
    "brand": "Peugeot",
    "type": "508"
  },
  {
    "id": "1591",
    "brand": "Peugeot",
    "type": "308"
  },
  {
    "id": "1594",
    "brand": "Honda",
    "type": "Civic"
  },
  {
    "id": "1605",
    "brand": "Renault",
    "type": "Clio"
  },
  {
    "id": "1607",
    "brand": "Renault",
    "type": "Laguna"
  }
]

我需要过滤的结果，例如品牌和类型。所以我有两个下拉列表名为'selectedBrand'和'selectedType'。

我使用这个标记将单个品牌加载到下拉列表中:

<select id="brands" data-ng-model="selectedBrand" data-ng-options="car.brand for car in cars | unique:'brand' | orderBy:'brand'">
</select>

这工作得很好，给了我一个独特的品牌下拉列表，像一个DISTINCT SELECT。

现在我想要第二个下拉列表过滤时，第一个有一个选定的值。这是我对第二个下拉列表的标记:

<select id="type" data-ng-model="selectedType" data-ng-options="car.type for car in cars | filter:{brand:selectedBrand} | unique:'type' | orderBy:'type'">
</select>

但这不起作用。它显示了每个品牌的完整清单。

我想我需要一些方法来触发它时，第一个下拉列表的变化?我对AngularJs很陌生，所以如果有任何帮助，我将不胜感激。

我不知道这是否是从Json结果中获得那些DISTINCT值的最佳方法。我只有这个完整的Json结果集与所有的数据，这就是我必须与工作。

按照文档，您将需要一个ng-model-options="{ updateOn: 'your option here' }"来执行此绑定

相关文章：