angular 中的级联 select 选项

Question

我无法通过 angular 中的第一个下拉菜单选择工作。在选择第一个选项时，如果它具有 divisions 的值，我想在第二个下拉列表中显示它们，如果后者具有 workplaces[=26 的值=] 我想在第三个中展示它们。

这是我的html

<div ng-controller="SectorController">
<select class="form-control" id="businessUnit" ng-model="divisionsSource" 
            ng-options="businessUnit.division as businessUnit.sectorName for businessUnit in businessUnits track by businessUnit.id">
                <option value=''>Select</option>
            </select>

        <td>
          <select class="form-control" id="division" ng-model="workplacesSource" ng-disabled="!divisionsSource"
          ng-options="division.workplace as division.sectorName for division in divisionsSource track by division.id">
            <option value=''>Select</option>
          </select>

          <select class="form-control" id="workplace" ng-disabled="!workplacesSource || !divisionsSource" ng-model="workplace">
          <option value=''>Select</option> 
          <option ng-repeat="workplace in workplacesSource" value='{{workplace}}'>{{workplace}}</option>
          </select>  

这是我的 json 供稿：

$rootScope.businessUnits = [
                      {
                        "id": 1,
                        "sectorName": "AAA",
                        "sectorLevel": 20
                      },
                      {
                        "id": 2,
                        "sectorName": "BBB",
                        "sectorLevel": 20
                      },
                      {
                        "id": 3,
                        "sectorName": "CCC",
                        "sectorLevel": 20
                      },
                      {
                        "id": 4,
                        "sectorName": "DDD",
                        "sectorLevel": 20,
                        "divisions": [
                          {
                            "id": 6,
                            "sectorName": "DDD1",
                            "sectorLevel": 30
                          },
                          {
                            "id": 7,
                            "sectorName": "DDD2",
                            "sectorLevel": 30
                          },
                          {
                            "id": 8,
                            "sectorName": "DDD3",
                            "sectorLevel": 30
                          },
                          {
                            "id": 9,
                            "sectorName": "DDD4",
                            "sectorLevel": 30,
                            "workplaces": [
                              {
                                "id": 12,
                                "sectorName": "DDD4 SUB1",
                                "sectorLevel": 40
                              },
                              {
                                "id": 13,
                                "sectorName": "DDD4 SUB2",
                                "sectorLevel": 40
                              }
                            ]
                          },
                          {
                            "id": 10,
                            "sectorName": "DDD5",
                            "sectorLevel": 30
                          },
                          {
                            "id": 11,
                            "sectorName": "DDD6",
                            "sectorLevel": 30
                          }
                        ]
                      },
                      {
                        "id": 5,
                        "sectorName": "EEE",
                        "sectorLevel": 20
                      }
                    ]

任何输入将不胜感激。

Answer 1

您的 ng-options 不正确。这是修复它的 plunkr：http://plnkr.co/edit/GOIiGXAHnr7nUfv4NHVH?p=preview

解释：

businessUnit.division as businessUnit.sectorName 
for businessUnit in businessUnits track by businessUnit.id

因此，当在第一个 select 框中 selected 选项时，其模型 (divisionsSource) 设置为 selected businessUnit的部门。但是 businessUnit 没有名为 division 的字段。它有一个名为 divisions.

的字段

所以代码应该是

businessUnit as businessUnit.sectorName 
for businessUnit in businessUnits track by businessUnit.id

下一个select框应该使用

division as division.sectorName 
for division in divisionsSource.divisions track by division.id