каскадное выпадающее меню angular, основанное на одной ng-модели с несколькими свойствами

Новичок в angular, и вам нужна помощь с каскадированием нескольких раскрывающихся списков. Все 3 раскрывающихся списка получают значения на основе одного источника данных (ng-модели) с несколькими свойствами.

Пример модели:

Организационная таблица с полями «Имя», «Отдел», «Секция». Имя не уникально. Каждое имя имеет одну запись без раздела или раздела, И тогда, если есть имя раздела, для разделов будет нулевое значение, а затем повторяется для каждой комбинации. Пример:
ORG: [
{НАЗВАНИЕ: EPA, DIV: null, SECT: null},
{НАЗВАНИЕ: EPA, DIV: Office of Water, SECT: null},
{НАЗВАНИЕ: EPA, DIV: Office of Water, SECT: AED},
{NAME: EPA, DIV: Office of Marine Protection, SECT: null},
{NAME: DOI, DIV: null , SECT: null} и т. д.

Цель состоит в том, чтобы, когда пользователь выбирает ИМЯ, разделы заполнялись (включая нуль). Когда пользователь выбирает DIV, разделы будут заполняться (включая null). До сих пор я пробовал каскадный пример со странами/штатами/городами, но эта информация поступает из разных моделей ng. Вся моя информация будет поступать из 1 ng-model. Я думаю, может быть, мне нужно что-то сделать с фильтрацией, но модель будет одинаковой для всех трех вариантов. Я не уверен, как действовать дальше. Спасибо!!


angularjs cascadingdropdown angular-ngmodel
person Tonia    schedule 11.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я слишком старался, чтобы представление справилось с этим с помощью магии angular/bootstrap. В конце концов, я воспользовался помощью своего контроллера и просто добавил ng-change при каждом выборе.

<div class="form-group">
    <label class="col-md-2 control-label">Organization</label>
    <div class="col-md-10">
        <select id="inputORGANIZATION_N" name="NAME"
            ng-model="newOrg.NAME" ng-change="filterDivs($data)"
            ng-options="o.ORGANIZATION_ID as o.NAME for o in 
            allOrganizations | unique: 'NAME' | orderBy: NAME'">
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label">Division</label>
    <div class="col-md-10">
        <select id="inputORGANIZATION_DIV" name="DIVISION"
            ng-model="newOrg.DIVISION" ng-change="filterSecs($data)"
            ng-options="d.ORGANIZATION_ID as d.DIVISION for d in
            filteredDivs | unique: 'DIVISION' | orderBy:'DIVISION'">
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label">Section</label>
    <div class="col-md-10">
        <select id="inputORGANIZATION_SEC" name="SECTION"
            ng-model="newOrg.SECTION"
            ng-options="s.ORGANIZATION_ID as s.SECTION for s in
            filteredSecs | unique: 'SECTION' | orderBy: 'SECTION'">
        </select>
    </div>
</div>

затем мой $scope.filteredDivs был обновлен на основе данных $, переданных в событии ng-change.

for (var i = 0; i < $scope.allOrganizations.length; i++) {
    if ($scope.allOrganizations[i].NAME == data.NAME) {
        $scope.filteredDivs.push($scope.allOrganizations[i]);
    };
};

И то же самое для моих разделов, основанных на данных $, переданных из ng-change в разделе.

person Tonia    schedule 12.05.2015