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 回答