以角度子類別過濾器下拉列表

我有兩個下拉列表，我用來自服務器的數據填充。第一個下拉列表包含一個類別，第二個下拉列表包含所有子類別。像這樣：以角度子類別過濾器下拉列表

<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項目的maincategory 2.

我希望用戶能夠選擇主要類別或子類別。

選擇一個主類別應該過濾第二個下拉只顯示鏈接到該類別的子類別（即與的parentID子類別）
子類別，纔可以選擇，如果一個主種類已被選擇

我的問題是，如何實現這種過濾角？我想我應該用某種方式使用ng-options和angulars過濾器，但我不知道如何。

現在第二個下拉列表包含所有子類別，而不管第一個下拉列表中的選定值如何。我知道我必須在過濾器中使用我的parentID來識別哪些子類別應該可見，但我在哪裏放置它？

來源

2013-04-24 Alex B

那麼，你有什麼嘗試？ – 2013-04-24 12:17:47

我在這裏回答了一個類似的問題 - http://stackoverflow.com/questions/16178243/bind-ng-options-to-remote-json-data/16178553#16178553 – Langdon 2013-04-24 13:57:04

我還是有點新的與AngularJS，所以這可能不是最好或最優雅的解決方案，但對我的作品：

1：

OK，我在下面的方法解決了這個）填充的兩個選擇框通過一個NG-重複命令：

<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定義了工廠子類別，並且有一個getId方法，它把categoryId作爲一個參數，但是你可以用其他方式填充/過濾你的列表！）

所以，這個想法是調用categoryList的改變函數來重新評估subcategoryList後面的數據。

我還沒有工作的禁用子類別列表中，如果不選擇一個類別，但它應該是這樣的（在第二個選擇框的定義）：

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

然而，NG-禁用似乎並不適用於選擇框，所以你可能需要這樣的東西在這裏： ng:disabled does not work with select html element

希望這會有所幫助。

來源

2013-07-31 16:18:20 MarioMucalo

以角度子類別過濾器下拉列表

回答

相關問題