Question

我正在从休息服务中检索一些数据，并用它来填充选择AngularJS的选项。

如果用户在检索到数据后打开了选择，则没有问题。

如果用户在检索数据之前打开选择，并在填充选项之前保持打开，则chrome不会调整选项列表的大小，只显示高度为一行的滚动条。这对用户来说是不可容忍和误导的。

有什么方法可以在Chrome中修复此问题吗？我意识到我可以保持选择禁用或隐藏，直到我填充选项，但我想知道是否还有其他选择。

Html（该按钮模拟对休息服务的调用）：

<div ng-controller="MyCtrl">
  <button type="button" ng-click="clickButton()">Add options
  </button>
  <select ng-model="value" style="width: 200px;"
    ng-options="o.id as o.label for o in list"
  ><option value=""></option></select>
  {{value}}
</div>

使用Javascript：

function MyCtrl($scope, $timeout) {
    $scope.list = [];
    function addToList() {
        $scope.list = [{
            "id" : 1,
            "label" : "One"
          }, {
            "id" : 2,
            "label" : "Two"
          }, {
            "id" : 3,
            "label" : "Three"
          }
        ];
    }
    $scope.clickButton = function() {
        $timeout(function() {
        addToList();
      }, 5000);
    };
}

在jsFiddle：http://jsfiddle.net/PabloMG/u3fz9be0/

Answer 1

我总是喜欢使用ng-if，因为您可以在添加数据之前添加加载消息。这更明确地发生了什么，而不是禁用的输入。

注意，此处的超时用于概念验证。您可能希望从控制器中的$ http回调加载列表。

更新：使用禁用ng

添加了第二个选择输入

小提琴：https://jsfiddle.net/y7g3y9st/

function ListCtrl($timeout) {
  var vm = this;
  vm.list = [];

  loadList();

  function loadList() {
    $timeout(function() {
      vm.list = [{
        "id": 1,
        "label": "One"
      }, {
        "id": 2,
        "label": "Two"
      }, {
        "id": 3,
        "label": "Three"
      }]
    }, 2000);
  }
}

<div ng-if="!ctrl.list.length">
 Loading list...
</div>
<select ng-model="value" style="width: 200px;" ng-options="o.id as o.label for o in ctrl.list" ng-if="ctrl.list.length">
 <option value=""></option>
</select>

<!-- ng-disabled -->
<select ng-model="value" style="width: 200px;" ng-options="o.id as o.label for o in ctrl.list" ng-disabled="!ctrl.list.length">
  <option value=""></option>
</select>

Answer 2

在我们模糊选择框之前，我遇到了类似的情况，等到选项被追加，然后再次将焦点放在选择框上。如果你已经把它看得很近，那就有点奇怪了，但它比坐在那里没有数据的开放选择盒更好。

您的特定示例代码非常奇怪，因为您迫使等待5秒钟。

这将显示基本功能。

$scope.clickButton = function() {
    $timeout(function() {
    addToList();
    document.querySelector('select').blur();
    document.querySelector('select').focus();
  }, 5000);

在我们的实现中，我们检查特定的选择框是否在我们模糊它之前是否有焦点，并且只有当我们最初模糊它时盒子被聚焦时才重新聚焦。

Chrome：在用户打开选项后为其添加选项

2 个答案: