javascript - 如何在 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 更改后动态地在第二个 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，因为它更可测试并且更容易调试。能够在浏览器中设置断点并调试子列表是否正确创建真是太好了。

以下是解决此问题的第三种方法的片段。

Controller :

$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>