基于一个具有多个属性的ng模型的角度级联下拉列表

时间:2015-05-11 15:50:46

标签: angularjs angular-ngmodel cascadingdropdown

角色新手,需要级联多个下拉菜单的帮助。所有3个下拉列表都是根据一个具有多个属性的数据源(ng-model)获取值。

模型示例:

包含名称,分部,部分字段的组织表。名称不是唯一的。每个名称都有一个没有分区或分区的条目,然后如果有分区名称,则分区将有一个空值,然后为每个组合重复。例如:
ORG:[
{NAME:EPA,DIV:null,SECT:null},
{名称:EPA,DIV:水办公室,SECT:null},
{名称:EPA,DIV:水办公室,SECT :AED},{{NAME:EPA,DIV:海洋保护办公室,SECT:null},
{名称:DOI,DIV:null,SECT:null}等。

目标是当用户选择NAME时,将填充Divisions(包括null)。当用户选择DIV时,这些部分将填充(包括null)。到目前为止,我已经尝试了与国家/州/城市的级联示例,但这些信息来自不同的ng模型。我的所有信息都来自1 ng模型。我想也许我需要做一些过滤,但是模型对于所有3个选择都是相同的......我不知道如何继续。 谢谢!

1 个答案:

答案 0 :(得分:0)

我试图通过角度/引导魔法帮助视图处理这个问题。最后,我使用了我的控制器的帮助,并在每个选择上添加了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传递的$数据。