Question

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

<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”链接到主要类别，因此在上面的示例中，Subitem 1可以具有parentID = 2，这意味着Subitem1具有Item 2的maincategory。

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

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

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

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

Answer 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
    });
}

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

因此，我们的想法是在更改categoryList时调用一个函数来重新评估子类别列表后面的数据。

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

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

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

希望这有帮助。

使用angular中的子类别过滤下拉列表

1 个答案: