Question

我想以异步方式显示视图中的元素列表。例如，我有一个返回promise的方法，结果将如下所示。

var result = {
    books: [
        {name: 'The Kite Runner', author: 'Khaled Hosseini'},
        {name: 'The Book Thief', author: 'Markus Zusak'},
        {name: 'A Thousand Splendid Suns', author: 'Khaled Hosseini'},
    ]
}

这是一种方法：

function getBooks(userId) {
    return BookProduct.getBooksByUser.query({ id: userId }).$promise;
};

然后我有一个调用getBooks的方法。

$scope.showBooks = function(userId) {
    //some users id
    var users_id = [1,2,3,4,5];
    $scope.tables = [];
    for (i = 0; i < users_id.length; i++) {
        getBooks(i).then(function(result){
           $scope.table = {
               books = result;
           } 
            $scope.tables.push($scope.table);
        })
    }
}

此后我想在角色ng-repeat的视图上向用户显示。

<div data-ng-repeat="table in tables">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Author</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="book in table.books">
                <td>{{ name }}</td>
                <td>{{ author }}</td>
            </tr>
        </tbody>
    </table>
</div>

效果很好但是当执行$scope.showBooks函数并且$scope.tables已满时，ng-repeat将起作用。我正在寻找更好的解决方案。当方法getBooks()调用时，我想在每次迭代时为用户零碎地加载书籍。

所以在这部分例如当第一次迭代正在处理并且我得到2个元素的结果时，我将它们传递给视图，用户可以看到第一部分。下一次迭代我得到了其他3个元素，所以我将它们添加到以前的结果并传递给视图，因此用户现在可以看到5个元素，依此类推。我知道这对用户来说几乎是不敏感的，但如果我的服务器响应缓慢，它将帮助我更加用户友好。

for (i = 0; i < users_id.length; i++) {
            getBooks(i).then(function(result){
               $scope.table = {
                   books = result;
               } 
                $scope.tables.push($scope.table);
            })
        }

我不是在问你如何实现它。我只是想知道它是否可能，我应该去哪里了解更多，因为我尝试了一些谷歌搜索但没有成功。

Answer 1

Angular有一个循环，在这个循环中它执行所有范围功能，并且在“监视”的每个循环之后，它会对视图进行更改。默认情况下，Angular会自动执行此操作 - 例如，范围内变量的简单更改也会重新呈现视图。但在某些情况下，您可能希望拦截，因为您的操作不会触发重新渲染。

对于这些情况，$ apply和$ digest很有用 - 更多文档https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$ apply

角度js ng异步重复

1 个答案: