Question

我试图在请求数据完全加载到数组之前阻止ng-repeat运行，我已经使用超时完成了它但它只在请求少于我说的时才起作用

这是我的HTML：

<div class="blocks-container" ng-init="loadProjects()" ng-controller="buildMonitorController">
<div class="row">
   <!-- <div> -->
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
             ng-if="!errorDialogActive && finishedRequest"
             ng-repeat="build in builds.builds.build track by build._id | orderBy:'lastBuildDetails.startDate' : true"
             ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}"
             id="{{build._id}}">
            <div class="title-container"><p>{{build._buildTypeId}}</p></div>
            <div class="update-container col-xs-12">
            <time>{{ build.lastBuildDetails.startDate | date : 'dd.MM.yyyy H:mm:s'}}</time>
            </div>
        </div>
    <!--</div>-->
</div>
<!-- Start error state dialog -->
<div ng-include src="'views/main/error-dialog.html'"></div>

这是我的AngularJS：

        $scope.refreshBuilds = function () {
        $scope.errorList.length = 0
        //@TODO remove this part right after the API is working
        //Init
        var suffix = '';
        var randomnumber = Math.floor(Math.random() * 3);


        //simulate mock by random number
        switch (randomnumber) {

            case 1:
                suffix = '-success';
                break;

            case 2:
                suffix = '-less';
                break;

            default:
                break;
        }

        var url = 'mock/builds'+suffix+'.xml';
        console.log('url: ' + url)
        $http({
            method: 'GET',
            url: url,
            headers: {
                Authorization: 'Basic AAA'
            }
        }).success(function (data, status) {
            //Recive builds from xml and reset scope
            var buildsToFilter = new X2JS().xml_str2json(data);
            $scope.errorDialogActive = false;
            //filter builds which have a no build API detail status
            if (buildsToFilter.builds.build !== undefined) {
                angular.forEach(buildsToFilter.builds.build, function (build, index) {
                    $http({
                        method: 'GET',
                        url: 'mock/build-'+build._id+'.xml',
                        headers: {
                            Authorization: 'Basic AAA'
                        }
                    }).success(function (buildDetailData) {
                        $scope.errorDialogActive = false;
                        //push detail data into build array
                        buildsToFilter.builds.build[index].lastBuildDetails = new X2JS().xml_str2json(buildDetailData).build;
                        console.log(buildsToFilter.builds.build[index]);

                    }).error(function (data, status) {
                        $scope.errorDialogActive = true;
                        //remove build from index if no build detail was found
                        buildsToFilter.builds.build.splice(index, 1);
                        $scope.setError(status, '', '');
                    }).then(function () {
                        //after filtering builds to display, setup builds $scope for FrontEnd
                        $scope.builds = buildsToFilter;
                    });
                });
            } else {

            }

        }).error(function (data, status) {

            //active dialog if error happens & set error
            $scope.errorDialogActive = true;
            $scope.setError(status, 'builds', '');
        }).then(function () {

            $timeout(function () {
                $scope.finishedRequest = true; 
            }, 5000);


            //refresh right after proceed and a little delay
            $timeout(function () {
                console.log('Starting refresh');
                $scope.refreshBuilds();
            }, 21000);


        })
    };

Answer 1

你可以放条件

ng-show=builds.builds.build.length > 0

因此，当builds.builds.build有数据时，只会显示

Answer 2

你已经有了

ng-if="!errorDialogActive && finishedRequest"

到位，但您从未设置$scope.finishedRequest = false。如果您只是修改refreshBuilds函数，如下所示：

$scope.refreshBuilds = function () {
    $scope.finishedRequest = false;
    $scope.errorList.length = 0;
    // etc

它是否以您想要的方式工作？

防止重复，直到请求数据完全加载

2 个答案: