Диалоговое окно с подкатегориями в угловом

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», так что в приведенном выше примере, Подраздел 1 может иметь ParentID = 2, что означает Subitem1 имеет maincategory пункта 2.

Я хочу, чтобы пользователи могли выбирать основную категорию ИЛИ подкатегорию.

• Выбор основной категории следует выбирать второй выпадающий список, чтобы показывать только подкатегорию, связанную с этой категорией (т.е. подкатегории с ТОЙ ParentID)

• Подкатегория может быть выбрана, только если основной категорией был выбран

Мой вопрос: как достичь этой фильтрации в угловом? Я думаю, что я должен каким-то образом использовать фильтры ng-options и угловые фильтры, но я не уверен, как это сделать.

В настоящее время во втором раскрывающемся списке содержатся все подкатегории, независимо от выбранного значения в первом выпадающем меню. Я знаю, что я должен использовать свой родительский идентификатор в фильтре, чтобы определить, какие подкатегории должны быть видимыми, но где я его помещаю?

Answer 1

Я еще немного нового с AngularJS, так что это не может быть лучшим или наиболее элегантное решение, но работает для меня:

ОК, я решил это в следующем виде:

1) Населенные два полей выбора над нг-повтор команды:

<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, в котором определена подкатегория фабрики, и имеет метод get, который принимает параметр categoryId в качестве параметра, но вы можете заполнить/отфильтровать список любым другим способом!)

Итак, идея состоит в вызове функции при изменении списка категорий для переоценки данных за подкатегорией.

Я не работал на отключение списка ПОДКАТЕГОРИИ если категория не выбрана, но это должно быть что-то вроде этого (в определении второго поля выбора):

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

Однако, нг-инвалидах похоже, не подходит для выбора ящиков, поэтому вам может понадобиться что-то вроде этого: ng:disabled does not work with select html element

Надеюсь, это поможет.