根據上一個字段動態填充下拉列表

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，值將綁定到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>

小提琴

根據上一個字段動態填充下拉列表

問題描述

3 個解決方案

解決方案1
1 2014-07-18 06:22:49

解決方案2
1 已采納 2014-07-18 06:43:57

解決方案3
1 2014-07-18 06:51:25

根據上一個字段動態填充下拉列表

問題描述

3 個解決方案

解決方案1 1 2014-07-18 06:22:49

解決方案2 1 已采納 2014-07-18 06:43:57

解決方案3 1 2014-07-18 06:51:25

解決方案1
1 2014-07-18 06:22:49

解決方案2
1 已采納 2014-07-18 06:43:57

解決方案3
1 2014-07-18 06:51:25