angular 基于一个具有多个属性的 ng 模型的级联下拉列表
angular cascading dropdown based off one ng-model with multiple properties
angular 的新手,需要有关级联多个下拉列表的帮助。所有 3 个下拉列表都基于具有多个属性的一个数据源(ng-model)获取值。
型号示例:
Org Table 带有名称、部门、部门字段。名称不是唯一的。每个名称都有一个没有部门或部门的条目,然后如果有部门名称,部门将有一个空值,然后对每个组合重复。例如:
组织:[
{ NAME: EPA, DIV: null, SECT: null},
{ NAME: EPA, DIV: Office of Water, SECT: null},
{ NAME : EPA, DIV: 水务办公室, SECT: AED},
{ NAME: EPA, DIV: 海洋保护办公室, SECT: null},
{ NAME: DOI, DIV: null, SECT: null}等
目标是当用户选择 NAME 时,Divisions 将填充(包括 null)。当用户选择 DIV 时,将填充这些部分(包括空值)。到目前为止,我已经尝试了 Countries/States/Cities 的级联示例,但此信息来自不同的 ng-models。我的所有信息都将来自 1 ng-model。我在想也许我需要做一些过滤,但所有 3 个选择的模型都是相同的。我不确定如何进行。
谢谢!!
我太努力了,无法在 angular/bootstrap 魔法的帮助下让视图处理这个问题。最后,我使用了我的控制器的帮助,并在每个 select.
上添加了一个 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 事件中传递的 $data 进行了更新。
for (var i = 0; i < $scope.allOrganizations.length; i++) {
if ($scope.allOrganizations[i].NAME == data.NAME) {
$scope.filteredDivs.push($scope.allOrganizations[i]);
};
};
我的部分也一样,基于除法时从 ng-change 传递的 $data。
angular 的新手,需要有关级联多个下拉列表的帮助。所有 3 个下拉列表都基于具有多个属性的一个数据源(ng-model)获取值。
型号示例:
Org Table 带有名称、部门、部门字段。名称不是唯一的。每个名称都有一个没有部门或部门的条目,然后如果有部门名称,部门将有一个空值,然后对每个组合重复。例如:
组织:[
{ NAME: EPA, DIV: null, SECT: null},
{ NAME: EPA, DIV: Office of Water, SECT: null},
{ NAME : EPA, DIV: 水务办公室, SECT: AED},
{ NAME: EPA, DIV: 海洋保护办公室, SECT: null},
{ NAME: DOI, DIV: null, SECT: null}等
目标是当用户选择 NAME 时,Divisions 将填充(包括 null)。当用户选择 DIV 时,将填充这些部分(包括空值)。到目前为止,我已经尝试了 Countries/States/Cities 的级联示例,但此信息来自不同的 ng-models。我的所有信息都将来自 1 ng-model。我在想也许我需要做一些过滤,但所有 3 个选择的模型都是相同的。我不确定如何进行。 谢谢!!
我太努力了,无法在 angular/bootstrap 魔法的帮助下让视图处理这个问题。最后,我使用了我的控制器的帮助,并在每个 select.
上添加了一个 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 事件中传递的 $data 进行了更新。
for (var i = 0; i < $scope.allOrganizations.length; i++) {
if ($scope.allOrganizations[i].NAME == data.NAME) {
$scope.filteredDivs.push($scope.allOrganizations[i]);
};
};
我的部分也一样,基于除法时从 ng-change 传递的 $data。