Question

我无法获得级联下拉选择以角度为第一个工作。在选择第一个选项时，如果它具有分区的值，我想在第二个下拉列表中显示它们，如果后者具有工作区的值，我会喜欢在第三部分展示他们。

这是我的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 feed：

$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选项不正确。这是一个修复它的plunkr：http://plnkr.co/edit/GOIiGXAHnr7nUfv4NHVH?p=preview

说明：

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

因此，当在第一个选择框中选择一个选项时，其模型（divisionsSource）将设置为所选的businessUnit分区。但是businessUnit没有名为division的字段。它有一个名为divisions。

的字段

所以代码应该是

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

并且下一个选择框应该使用

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

级联中的级联选择选项

1 个答案: