如何在angular.js中使用可靠的ddl

Question

我有兩個下拉列表，第二個具有完全取決於第一個的數據，這是ddl的示例：

<select name="tipochip" class="form-control" required ng-model="formvendas.model.idchipotipoprod">
<option ng-repeat="produto in vendas.produtos" value="{{$index}}">{{produto.Descricao}}</option>
</select>

第二個工作：

<select name="tipochip2" class="form-control"
required
ng-disabled="formvendas.model.idchipotipoprod==undefined || formvendas.model.idchipotipoprod==null"
ng-model="formvendas.model.idchipotipo">

<option ng-repeat="promo in vendas.produtos[formVendas.model.idchipotipoprod].kids" value=" {{promo.IDChipTipo}}">{{promo.Descricao}}</option> </select>

我現在的問題與ng-repeat有關，但我現在沒有其他使用angular的方法。 我需要一種在第一個更改后在第二個ddl中動態插入選項的方法

這是我擁有的數據的示例，因此您可以了解我的問題：

{"prods": [
        {
            "IDChipTipo": 1,
            "Descricao": "ddl1 data",
            "kids": [
                {
                    "IDChipTipo": 2,
                    "Descricao": "ddl2 data first",

                },
                {
                    "IDChipTipo": 3,
                    "Descricao": "ddl2 data second",

                },
                {
                    "IDChipTipo": 4,
                    "Descricao": "ddl2 data third",

                }
            ]
        },
        {
            "IDChipTipo": 200,
            "Descricao": "some other ddl1 data",
            "kids": null
        }
    ]}

Answer 1

我在此處創建了如何執行此操作的示例： http : //plnkr.co/edit/KA9OH6qzyiZoaehMv2NW?p=preview

我展示了3種方法：

1. 使用ng-repeat進行工作。

2. 使用ng-options，最終使該值成為所選對象。

3. 使用范圍變量使邏輯更簡單

奇怪的是，我不確定為使它工作而改變了什么。 它一定只是錯字或我猜的東西。 我不會花時間去弄清楚你，但是如果你願意，我很想聽聽那是什么。

我更喜歡＃3，因為它更容易測試且更容易調試。 能夠在瀏覽器中設置斷點並調試子列表已正確創建非常好。

以下是解決此問題的第三種方法的摘錄。

控制器：

$scope.getKidOptions = function() {
  var selectedProduct = $scope.formvendas.model.selectedProduct;
  if (selectedProduct) {
    return selectedProduct.kids;
  }

  return []
};

HTML：

<select name="tipochip-os" class="form-control" required
        ng-model="formvendas.model.selectedProduct"
        ng-options="p.Descricao for p in products track by p.IDChipTipo"></select>

<select name="tipochip-os2" class="form-control"
        required
        ng-disabled="!formvendas.model.selectedProduct"
        ng-model="formvendas.model.selectedKid"
        ng-options="k.Descricao for k in getKidOptions()"></select>