选择下拉菜单和承诺 - 短暂地清空选择答案

【问题标题】：select drop downs and promises - briefly empty selects选择下拉菜单和承诺 - 短暂地清空选择
【发布时间】：2016-07-30 09:07:41
【问题描述】：

我有两个过滤器，在将数据查询到远程服务器之前，第一个会影响第二个。

我有一个选择，在$scope.locationCodes 中有它的选项。此选择依赖于另一个下拉列表（客户）。一旦选择了客户，我就有了 ID，然后将其传递给第一个函数中返回的承诺。

问题一：

一旦我选择了一个客户，如果我真的很快去选择一个位置代码（在代码下拉列表中），选项将是空白的。如果我模糊然后尝试再次选择，选项将显示，表明有一点延迟。在填充数组时处理这种延迟的最佳方法是什么？

代码：

HTML：

<select data-ng-options="locationCode in locationCodes"></select>

JS：

   $scope.getShipAbbleLocations = function (terminalId) {
      var customerId = $scope.customer.id;
      return Service.getShipAbbleLocations(customerId, terminalId).then(function (data) {
        getLocationCodes(data);
        _.defer(function () {
          $scope.$apply();
        })
      });

    };



 function getLocationCodes(data) {
          for (var i = 0; i < data.locationCodes.length; i++) {
            $scope.locationCodes.push(["(" + data.locationCodes[i].shipThruLocationCode + ")", data.locationCodes[i].shipThruLocationId]);
          }
          $scope.$apply();
        }

问题 2：

更重要的是，在选择客户之前，应禁用代码下拉菜单。我一直依靠控制器中的超时来处理禁用，方法是为“启用”设置延迟，以便有时间填充阵列。这可行，但是一旦您更改客户并且不必担心最初的禁用情况，问题就会重新出现。

我想知道是否有比超时更好的方法（希望能更好地理解 angularjs/promises）来处理这种延迟/异步性。

【问题讨论】：

你可以在选择中添加一个ng-disabled="!locationCodes || !locationCodes.length"。
当您不必担心初始禁用状态和更改客户时怎么办？原来的场景还是会出现
所以只有在客户发生变化时才应该禁用它？
没有。我擅长禁用部分，即使它有一个超时黑客。主要问题是，一旦您选择了客户，在填充位置代码数组时就会出现延迟，这会间歇性地导致空白选择。我该如何处理？
那么显然会有延迟，因为您正在执行 XHR 来获取数据。您最好的选择是在填充 locationCodes 数组之前将其保持禁用状态（用户将无法看到空选项），并在花费大量时间时向用户提供一些加载指示。

标签： javascript angularjs asynchronous promise angular-promise

【解决方案1】：

最好的方法是显示 LOADER 并禁用 UI，直到您的 AJAX 调用完成。

为异步 ajax 调用实现加载器总是更好的做法。

您可以在拦截器中实现加载器代码，这样对于每个请求，加载器都会显示出来，而您不必为每个 AJAX 调用都实现，因为它在拦截器中。

【讨论】：