Question

我正在使用AngularJS创建一个包含多个下拉列表的表单。我想轻松定义这个逻辑：

如果下拉 n 所选项 x ，则下面的其他下拉列表（一个或多个）将填充 y 数据

......等等

例如，假设a = [1,2,3] 1.如果选择a = 1，则b为[8,9] 2.如果选择a = 2，则b将为[0,2]

...

我想你明白了。我想到三个选择：

选项1： 我可以使用AngularJS来绑定dropdown的值并执行一个巨大的嵌套if语句。但这看起来并不优雅。

选项2：

我可以用这种方式定义关系：

a = [1,2,3]
b = [
  {
    a:1,
    value: [8,9]
  }, {
    a:2,
    value: [0,2]
  }
]

选项3：

或者我可以做嵌套对象。但那么如何在表单模型中处理嵌套的JSON？另外，如果我想改变层次结构有点难度？我宁愿把它弄平。

a = [
  {
    value: 1,
    b: [8,9]
  }, {
    value: 2,
    b: [0,2]
  }, {
    value: 3,
    b: []
  }
]

做这样的事情最棒的方式是什么？是否有图书馆/模块？

Answer 1

我认为您可以使用ng-change指令并调用函数loadCombo2（valueCombo1），以便从第一个组合框加载您的第二个组合框。

在此函数中将第二个组合框的数据设置为：valueCombo1.b（来自选项3）

Answer 2

我会选择2。

select元素有一个键及其选项的显示值（key，displayValue）。

示例：

<select>
    <option value="key">displayValue</option>
<select>

ng-options接受以下格式的表达式：

ng-options="item.key as item.value for item in items"

这指定键将绑定到item.key，并且在呈现选项时，value将绑定到item.value。

您还可以将整个项目绑定为键：

ng-options="item as item.value for item in items"

根据您提供的键，当选择一个选项时，ng-model将绑定到它。

<强>控制器

    var app = angular.module("app", []);
    app.controller('Ctrl', function ($scope) {
        var b = [
          {
              a: 1,
              value: [8, 9]
          }, {
              a: 2,
              value: [0, 2]
          }
        ];
        $scope.b = b;
    });

<强> HTML

    <body ng-app="app" ng-controller="Ctrl">
        <select ng-model="first" ng-options="bb as bb.a for bb in b"></select> {{first}}<br />
        <select ng-model="second" ng-options="cc as cc for cc in first.value"></select>{{second}}
    </body>

JSFiddle

Answer 3

我会做这样的事情：

$scope.a = [1,2,3];

$scope.b = {
    1 : [1,2],
    2 : [2,4],
    3 : [3,6]
};

查看

<select 
    ng-options="item for item in a"
    ng-model="firstSelection">
</select>

<!-- use firstSelection to populate the second dropdown -->
<select
    ng-options="item for item in b[firstSelection]"
    ng-model="secondSelection">
</select>

<强> Fiddle

根据前一个字段动态填充下拉列表

3 个答案: