角度加载ng-repeat中的附加数据

时间:2015-05-19 00:51:44

标签: angularjs firebase

我有一个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或范围,以便我可以使用正常的角度来打印它。

关于如何做到最好的任何想法?

1 个答案:

答案 0 :(得分:0)

我要做的第一件事是在加载额外数据之前和之后使该数组可用。我假设您的完整用户对象包含字段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>