Question

我有一个包含两个下拉列表的页面。第一个填充类别列表，第二个填充选择类别后的服务列表。

我正确填充了第一个列表，并且服务列表填充了相关的服务。但是，当我从服务列表中选择所需的服务时，“类别”列表会重新填充并丢失所选的值。

一个例子是我从类别列表帐户中选择，服务列表填充了两个正确的选项。现在，当我选择我想要的服务时，第一个列表会在加载页面时恢复为原始状态。

这是html

 <select data-ng-model="vm.kioskCheckin.serviceId" data-ng-options="c.Name as c.Name for c in vm.categories"
                ng-change="vm.getServicesBC()"
                class="form-control input-lg" ng-required="true"
                id="category">
          <option value="">Choose Primary Reason for Visit</option>
        </select>
        <div class="v-Space10"></div>
        <select id="servicesDropDown" data-ng-model="vm.kioskCheckin.serviceId"
                data-ng-options="c.Name as c.Name for c in vm.servicesFiltered"
                ng-change="vm.setValues()"
                class="form-control input-lg invisible" ng-required="true">
          <option value="">Select Service...</option>
        </select>

以下是填充第二个下拉列表的代码（注意该页面加载第二个下拉列表时隐藏，直到第一个下拉列表有选择）

 vm.getServicesBC = function () {
  var mySelectedCategory = $('#category').val().split("string:").pop();
  vm.servicesFiltered = getServicesByCategory(mySelectedCategory);
    vm.filteredServices = getServicesByCategory(vm.services);
    vm.filteredServices = [];
    $('#servicesDropDown').removeClass("invisible");
  };

我可能遗失的任何建议或消息？

Answer 1

我意识到我使用了相同的模型，该模型会过度写入或导致类别下拉重新填充。

这是新的HTML

<div class="text-center" style="margin: 25px 0 50px;">
        <select data-ng-model="vm.selectedCategory" data-ng-options="c.Name as c.Name for c in vm.categories"
                ng-change="vm.getServicesBC()"
                class="form-control input-lg" ng-required="true"
                id="category">
          <option value="">Choose Primary Reason for Visit</option>
        </select>
        <div class="v-Space10"></div>
        <select id="servicesDropDown" data-ng-model="vm.kioskCheckin.serviceId"
                data-ng-options="s.ServiceId as s.DisplayName for s in vm.filteredServices"
                class="form-control input-lg invisible" ng-required="true">
          <option value="">Select Service...</option>
        </select>

新的js代码在这里

vm.getServicesBC = function () {
  vm.filteredServices = getServicesByCategory(vm.selectedCategory);
    $('#servicesDropDown').removeClass("invisible");
  };

在选择第二个下拉值后，角度双下降首先下降重新下降

1 个答案: