如何等到ng-repeat完成循环?

时间:2017-05-26 16:25:16

标签: javascript angularjs

我有一个例子从服务器获取json并将其附加到列表中。

脚本:

$http.get('/data/json/cities.json').then(function (res) {
    if (res.status === 200) {
        $scope.cities = res.data;
    }
});

HTML:

<li ng-repeat="(id, name) in cities" id="{{id}}">
    <a href="#" ng-bind="name"></a>
</li>

我被困的代码:

if (res.status === 200) {
    $scope.cities = res.data;

    // from here
    console.log($('li#NY').length); // 0

    // waiting 1 second and try again
    setTimeout(function () {
        console.log($('li#NY').length); // 1
    }, 1000);
}

json对象包含密钥NY,但我只能在1秒(或更长)后分配给对象(li标记,标识为NY)。

是否有另一种方法可以知道在不使用$('li#NY')的情况下成功创建了一个对象(本例中为setTimeout)?

1 个答案:

答案 0 :(得分:2)

您必须创建一个指令,请按照以下代码。

var module = angular.module('app', [])
        .directive('onFinishRender', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function () {
                        scope.$emit(attr.onFinishRender);
                    });
                }
            }
        }
    });

然后在你的控制器中,你可以用$ on来抓住它:

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
    console.log($('li#NY').length); // 1
});

html看起来像这样:

<li ng-repeat="(id, name) in cities" id="{{id}}" on-finish-render="ngRepeatFinished">
    <a href="#" ng-bind="name"></a>
</li>