过滤下拉列表中的子类别 [英] Filter dropdown with subcategories in angular

问题描述

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

 < select ng-model =category1> 
< option value =1>项目1< / option> 
< option value =2>项目2< / option> 
< option value =3> Item 3< / option> 
< / select> 
 
< select ng-model =category1> 
< option value =4>子项1< / option> 
< option value =5>子项2< / option> 
< / select> 
  

子类别通过属性parentID链接到主要类别，因此在上述示例中，子项目1可能有一个parentID = 2，这意味着Subitem1具有项目2的主要类别。

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

• 选择主要类别应过滤第二个下拉列表，仅显示链接到该类别的子类别（即具有该父类别的子类别）




• 只有选择了主要类别，才能选择子类别

我的问题是，如何在角度上实现这种过滤？我想我应该以某种方式使用ng选项和角度过滤器，但我不知道如何。

现在第二个下拉列表包含所有子类别，不管第一个下拉列表中的选定值。我知道我必须在过滤器中使用我的parentID来识别哪些子类别应该是可见的，但是我在哪里可以看到？

解决方案

p>我对AngularJS还有一点新意，所以这可能不是最好的或最优雅的解决方案，但适用于我：

好的，我解决了这个以下方式：

1）通过ng重复命令填充两个选择框：

 < select ng-model =categoryIdng-change =updateSubcategorySelect（）> 
< option ng-repeat =categoryList中的categoryvalue ={{category.Id}}> 
 {{category.Name}} 
< / option> 
< / select> 
< select ng-model =subcategoryId> 
< option ng-repeat =subcategoryList中的子类别value ={{subcategory.Id}}> 
 {{subcategory.Name}} 
< / option> 
< / select> 
  

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

  $ scope.updateSubcategorySelect = function（）{
 $ scope.subcategoryList = Subcategory.query（{
 categoryId：$ scope。 categoryId 
}）; 
} 
  

（当然，这假设您使用API​​填充您的列表，工厂子类别被定义，并且有一个get方法，以categoryId作为参数，但是你可以用其他方式填充/过滤列表！）

所以，这个想法是调用categoryList更改的函数来重新评估subcategoryList背后的数据。

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

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

然而，ng-disabled似乎在选择框中不能正常工作，因此您可能需要某些东西如下所示：
ng：disabled不适用于select html元素

希望这有帮助。

I have two dropdowns that I populate with data from the server. The first dropdown contains a category, and the second one contains all the subcategories. Like so:

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

Subcategories are linked to main categories by a property "parentID", so in the example above, Subitem 1 could have a parentID = 2, which means Subitem1 has the maincategory of Item 2.

I want the users to be able to select a main category OR a subcategory.

• Selecting a main category should filter the second dropdown to only show the subcategories linked to that category (i.e. the subcategories with THAT parentID)

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

My question is, how do achieve this filtering in angular? I'm thinking I should use ng-options and angulars filters in some way, but I'm not sure how.

Right now the second dropdowns contains all subcategories regardless of the selected value in the first dropdown. I know I have to use my parentID in the filter to identify which subcategories that should be visible, but where do I put it?

解决方案

I am still a bit new with AngularJS, so this might not be the best or the most elegant solution, but works for me:

OK, I solved this in a following way:

1) Populated the two select boxes over an ng-repeat command:

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

where the function updateSubcategorySelect is defined in the AngularJS controller and looks like this:

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

(of course, this assumes you are popuating your list using an API where the factory Subcategory is defined and has a get method that takes categoryId as a parameter, but you can populate / filter your list any other way!)

So, the idea is to call a function on change of the categoryList to reevaluate the data behind the subcategoryList.

I have not worked on disabling the subCategory list if a category is not selected, but it should be something like this (in the definition of the second select box):

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

However, ng-disabled doesn't seem to work well with select boxes, so you might need something like this here: ng:disabled does not work with select html element

Hope this helps.

这篇关于过滤下拉列表中的子类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！