过滤带有角度子类别的下拉列表答案

【问题标题】：Filter dropdown with subcategories in angular过滤带有角度子类别的下拉列表
【发布时间】：2013-08-01 00:18:20
【问题描述】：

我有两个使用来自服务器的数据填充的下拉列表。第一个下拉列表包含一个类别，第二个下拉列表包含所有子类别。像这样：

<select ng-model="category1">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

<select ng-model="category1">
    <option value="4">Subitem 1</option>
    <option value="5">Subitem 2</option>
</select>

子类别通过属性“parentID”链接到主类别，因此在上面的示例中，子项 1 的 parentID = 2，这意味着子项 1 具有项 2 的主类别。

我希望用户能够选择主类别或子类别。

选择一个主类别应过滤第二个下拉列表，以仅显示链接到该类别的子类别（即具有该 parentID 的子类别）
只有在选择了主类别后才能选择子类别

我的问题是，如何实现角度过滤？我想我应该以某种方式使用 ng-options 和 angulars 过滤器，但我不确定如何。

现在第二个下拉列表包含所有子类别，无论第一个下拉列表中选择的值如何。我知道我必须在过滤器中使用我的 parentID 来确定哪些子类别应该可见，但我应该把它放在哪里？

【问题讨论】：

嗯，你试过什么？
我在这里回答了一个类似的问题 - stackoverflow.com/questions/16178243/…

标签： html drop-down-menu angularjs

【解决方案1】：

我对 AngularJS 还是有点陌生，所以这可能不是最好或最优雅的解决方案，但对我有用：

好的，我通过以下方式解决了这个问题：

1) 通过 ng-repeat 命令填充两个选择框：

<select ng-model="categoryId" ng-change="updateSubcategorySelect()">
  <option ng-repeat="category in categoryList" value="{{category.Id}}">
    {{category.Name}}
  </option>
</select>
<select ng-model="subcategoryId">
  <option ng-repeat="subcategory in subcategoryList" value="{{subcategory.Id}}">
    {{subcategory.Name}}
  </option>
</select>

函数 updateSubcategorySelect 在 AngularJS 控制器中定义，如下所示：

$scope.updateSubcategorySelect= function () {
    $scope.subcategoryList= Subcategory.query({
        categoryId: $scope.categoryId
    });
}

（当然，这假设您使用 API 填充列表，其中定义了工厂 Subcategory 并且具有将 categoryId 作为参数的 get 方法，但您可以通过任何其他方式填充/过滤列表！）

所以，想法是在 categoryList 发生变化时调用一个函数来重新评估 subcategoryList 后面的数据。

如果没有选择一个类别，我还没有禁用子类别列表，但它应该是这样的（在第二个选择框的定义中）：

  <select ng-model="subcategoryId" ng-disabled="countryId === 0 || countryId === undefined">

但是，ng-disabled 似乎不适用于选择框，因此您可能需要这样的东西： ng:disabled does not work with select html element

希望这会有所帮助。

【讨论】：