数据准备好时 ng-repeat

Question

我有一个包含两个网页的网站：

1. 设置页面：带有如下所示 JSON 内容的网页：

   {"来源":["1","2","3","4"]}

2. 显示系统中所有已知“来源”的网页。一个接一个地打印出来。

当我的应用程序加载时，我下载了源页面，并保存在我的范围内$scope.Settings.Sources。

我的 AngularJS 代码：

$scope.getSettings = function (ID, successCallback, failureCallback)
{
    $scope.ID = ID;

    $http.get("/sources?ID=" + ID).then(function (response)
    {
        if (response.status == 200)
        {
            $scope.Settings = response.data;
            successCallback();
        }
        else
        {
            failureCallback();
        }
    });
}

function getSettings_success()
{
    // Ready to update the ng-repeat NOW.
}

function getSettings_error()
{
    alert('Error');
}

$scope.getSettings(1, getSettings_success, getSettings_error);

现在，当我准备好$scope.Settings.Sources 时，我所要做的就是在特定的 HTML 模板中打印每个来源。因此，我正在考虑使用 ng-repeat 来完成这项任务。像这样的：

<div ng-init="sources=$scope.Settings.Sources">
    <ul>
        <li ng-repeat="source in sources">
            {{ source }}
        </li>
    </ul>
</div>

很遗憾，此代码不起作用。这是因为当页面加载时，$scope.Settings.Sources 还没有准备好。因此，ng-repeat 必须在“源”页面下载后运行。

这可能吗？如果是，怎么做？

Answer 1

您不应该在这种情况下使用ng-init，因为数据来自 Ajax，并且您正在将空白对象分配给源。原因还没有回应。相反，我会直接在您的视图上使用 Settings.Sources 变量。

标记

<div>
    <ul>
        <li ng-repeat="source in Settings.Sources">
            {{ source }}
        </li>
    </ul>
</div>

旁注：$scope 变量可在 Angular 指令中直接访问，您无需明确指定 $scope