javascript - AngularJS:在编写 HTML 之前等待上下文加载

Question

当以 HTML 表单加载输入选择时，有时从后端获取的数据尚未准备好，并且显示选择时没有选择任何选项。

是否可以等待数据加载后再在页面中写入输入选择？

或者有任何其他方法可以根据 Angular 值选择正确的选项。

PS。我无法更改从后端获取的数据，这些数据是所有值的 una 数组和具有所选选项的另一个变量。第一个总是正确加载，但有时当我想选择一个选项时，第二个是空的。

谢谢

Answer 1

我假设您使用异步方法来加载数据。在这种情况下，以下内容应该有效。

首先，有这样的标记:

<div ng-show="loading">
    Loading, please wait...
    <!-- can also put gif animation instead -->
</div>

<select ng-hide="loading">...</select>

在 Controller 中:

$scope.loading = true;
GetData().then(function() {
    $scope.loading = false;
}, function() {
    $scope.loading = false;
    alert('error');
});

这假设您将数据加载到返回 Promise 的函数中，您当然可以将 $scope.loading = false; 行放在代码中的正确位置，即数据之后实际已加载。

效果是，当 $scope.loading 设置为 true 时，用户将在隐藏下拉列表时看到“正在加载”消息，并且当您将其设置为false，下拉列表将变得可见，而“正在加载”消息将被隐藏。