过滤器下拉菜单与子角 [英] Filter dropdown with subcategories in angular

问题描述

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

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>

子类别被链接到主要类别由属性的parentID，所以在上面的例子中，子项1可以具有的parentID = 2，这意味着的SubItem1具有第2项的maincategory

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.

• 选择主类别应该过滤第二个下拉只显示链接到该类别的子类别（即与该的parentID子）

• 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

我的问题是，如何实现这个角度过滤？我想我应该用NG的选项，并以某种方式angulars过滤器，但我不知道怎么样。

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.

现在第二的下拉列表中包含所有子类别中，无论第一个下拉选择的价值。我知道我必须用我在过滤器中的parentID识别应该是可见其子，但我把它？

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?

推荐答案

我还是有点新的与AngularJS，所以这可能不是最好或最优雅的解决方案，但对我的作品：

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，我在下面的方式解决了这个：

OK, I solved this in a following way:

1）填充两个选择框在一个NG-重复命令：

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>

其中函数updateSubcategorySelect在AngularJS控制器定义是这样的：

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

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

（当然，这是假设你使用的是那里的工厂子类别的定义，并有一个GET方法，该方法的categoryId作为参数的API popuating您的清单，但你可以填充/过滤列表中的任何其他方式！）

(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!)

那么，这个想法是呼吁所属分类的变化的函数来重新评估subcategoryList背后的数据。

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

不过，NG-残疾似乎并没有与选择框好工作，所以你可能需要这样的事情在这里：
<一href=\"http://stackoverflow.com/questions/14288436/ngdisabled-does-not-work-with-select-html-element\">ng:disabled不选择HTML元素的工作

希望这有助于。

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