Question

我在前端完成了数据加载部分，我也试图把页面加载部分（进度条）。但是，它没有以正确的方式工作。我请求任何人帮助我......

HTML

<div class="w3-col m7" ng-init="init()" ng-show="IsVisibleForm">


    <div class="w3-row-padding">
        <div ng-show="IsVisible" style="text-align:center;">
            <md-progress-circular md-mode="indeterminate"></md-progress-circular>
            <h3>Please wait</h3>
        </div> 
        <div class="w3-col m12">
            <div>
                <h2><b>New Dogs</b></h2>

                <br />
                <div>

                    <table class="table defaultTable" ng-show="resultTble">

                        <tr>
                            <th></th>
                            <th>Dog ID</th>
                            <th>Dog Name</th>
                            <th>Sex</th>                            
                            <th>Sire Name</th>
                            <th>Dam Name</th>
                            <th>Creater</th>
                            <th>Created Date</th>
                            <!--<th></th>-->
                            <!--<th></th>-->
                        </tr>
                        <tr ng-repeat="d in newDogList">
                            <td><a href="#/EditDog/{{d.id}}" target="_blank">$</a></td>
                            <td><a href="#">#</a></td>
                            <td><a href="#/ViewDog/{{d.id}}" target="_blank">{{d.name}}</a></td>
                            <td>{{d.gender==1 ? 'Male' : d.gender==2 ? 'Female' : 'Unknown'}}</td>
                            <td>{{d.sireName}}</td>
                            <td>{{d.damName}}</td>
                            <!--<td><a href="#/Mail">&</a></td>-->
                            <td><a href="#/Mail/{{d.createdMailId}}" target="_blank">{{d.createdUserName}}</a></td>
                            <td>{{d.createdDate}}</td>
                            <!--<td>
                                <a href="#/Edit" class="btn btn-success btn-lg" title="Edit">
                                <span style="font-size: 15px" class="glyphicon glyphicon-edit"></span></a>
                            </td>-->
                           <!-- {{d.gender==1 ? 'Male' : d.gender==2 ? 'Female' : 'Unknown'}}-->
                            <!--{{d.gender==1 ? 'Male' : 'Female' }}-->
                            <!--<td>
                                <a href="#" class="btn btn-success btn-lg" title="Delete">
                                    <span style="font-size: 15px" class="glyphicon glyphicon-remove"></span>
                                </a>
                            </td>-->
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

控制器

    $scope.init = function () {
            $scope.IsVisible = true;
            $scope.IsVisibleForm = false;
            $scope.resultTble = false;
            //$scope.mail = urls.domain + "#/Mail/?createdMailId=";
    }

    var request = $http({
        method: 'GET',
        url: urls.api + 'Dog/NewDogs'

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

        //console.log(data);
        //console.log(JSON.stringify(data));
        //console.log(JSON.parse(JSON.stringify(data)));

        $scope.newDogList = angular.fromJson(data);
        $scope.IsVisible = false;
        $scope.IsVisibleForm = true;
        $scope.resultTble = true;
    })
     .error(function (error) {
         $scope.status = 'Unable to load new dog list: ' + error.message;
         console.log($scope.status);
     });

三江源

Answer 1

ng-model名为isVisibleForm的{{1}}初始化为false，隐藏了包含进度条的整个div。不应该设置（true）？

Nit：该模型似乎更好地命名为isFormVisible。

更新（在您发表评论后）：

你不需要另一种模式，一种就足够了。

<div class="w3-col m7" ng-init="init()">


    <div class="w3-row-padding">
        <div ng-show="IsVisible" style="text-align:center;">
            <md-progress-circular md-mode="indeterminate"></md-progress-circular>
            <h3>Please wait</h3>
        </div> 
        <div ng-hide="IsVisible" class="w3-col m12">
            <div>
                <h2><b>New Dogs</b></h2>
.
.

Answer 2

问题是，progress-bar位于主hiding div内。

当前情况：

如果，

IsVisibleForm - 隐藏 - ＆gt; 进度条 - 隐藏

IsVisibleForm - show - ＆gt; 进度条 - 显示

上述情况发生是因为 progress-bar 是 IsVisibleForm 的孩子

<强>解决方案：

将progress-bar移出IsVisibleForm div。

由于您已在progress-bar内取main div，因此init()函数中使用的逻辑无效。

<div ng-show="IsVisible" style="text-align:center;" ng-init="init()">
    <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    <h3>Please wait</h3>
</div> 

<div class="w3-col m7" ng-init="init()" ng-show="IsVisibleForm">
    <div class="w3-row-padding">
        <div class="w3-col m12">
            <div>
                <h2><b>New Dogs</b></h2>

                <br />
                <div>

                    <table class="table defaultTable" ng-show="resultTble">
                        ...
                        ...
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

$ http请求是异步的，你应该像这样使用

<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>

像这样整体

$scope.isLoading = true;

$http.get("/posts")
   .success(function (data) {
         $scope.$apply(function(){
           $scope.isLoading = false;
         });
   });

在你的JS中

var str = 'F200:0:0.0000:1:100:0:1:KPO2:0:0.0000:1:200:0:2:HGB1:0:0.0000:1:300:0:3';

str = str.replace(/((?:[^:]*:){6}(?:[^:]*)):/g, function() {
    var matches = arguments;
    return matches[1] + ',';
});

console.log(str);

页面加载Angularjs中的部分

3 个答案: