0

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

<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 的子类别）

  • Subcategories can only be selected if a main category has been selected

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

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

4

1 回答 1

2

我对 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 后面的数据。

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

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

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

希望这可以帮助。

于 2013-07-31T16:18:20.447 回答