Angular 在 ng-repeat 中加载额外的数据

Question

我有一个 ng-repeat，它有一堆 id 并在它们上面循环。然后我想从外部源加载数据。所以假设我有一个数组

[1,2,3,4,5]

我有一个 ng-repeat 循环然后显示

<div>1</div>
<div>2</div>
...

我想从外部源 (firebase) 加载更多详细信息以获取用户个人资料的详细信息，这样我就可以显示属于另一个部分的名字和姓氏，然后通过调用

http://firebase/users/user_1
http://firebase/users/user_2
...

然后以某种方式将它映射到 dom 或范围，这样我就可以使用正常的 angular 东西打印它。

知道如何做到最好吗？

Answer 1

我要做的第一件事是使该数组在加载额外数据之前和之后都可用。我假设您的完整用户对象具有字段 id

$scope.users = [1,2,3,4].map(function(id) {
    return {id: id};
});

这应该让你像这样使用 ng-repeat

<div ng-repeat="user in users">
    {{user.id}}
</div>

现在，在您的控制器中加载用户详细信息。我假设您有 User $resource 或类似服务

var userPromises = $scope.users.map(function(user) {
    return User.get({id: 'user_' + user.id}).$promise;
});
$q.all(userPromises).then(function(users) {
    $scope.users = users;
});

然后只需更改您的模板以使用额外的详细信息

<div ng-repeat="user in users">
    {{user.id}}
    <dl ng-if="user.$resolved">
        <dt>First name</dt>
        <dd>{{ user.firstName }}</dd>

        <dt>Last name</dt>
        <dd>{{ user.lastName }}</dt>
    </dl>
</div>

Angular 在 ng-repeat 中加载额外的数据

Angular load additional data in ng-repeat

angularjs

firebase