[英]Page Loading Part in Angularjs
I finished the data loading part in the front-end, and also i'm trying to put the page loading part (Progress bar).But, it is not working in the correct way. 我已经完成了前端的数据加载部分,并且试图将页面加载部分(进度条)放入。但是,它的工作方式不正确。 I kindly request anyone to help me...
我恳请任何人帮助我...
HTML 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>
controller 调节器
$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);
});
Thankyou 谢谢
Your ng-model
named isVisibleForm
is initialized to false which hides the entire div containing your progress bar. 名为
isVisibleForm
ng-model
初始化为false,这将隐藏包含进度条的整个div。 Shouldn't that be set ( true
)? 那不是应该设置为(
true
)吗?
Nit: That model seems better named as isFormVisible
. Nit:该模型似乎更好地命名为
isFormVisible
。
UPDATE (after your comment): 更新 (在您的评论后):
You don't need another model, one is enough. 您不需要另一种模型,一个模型就足够了。
<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>
.
.
The issue is that, the progress-bar
is inside the main hiding div
. 问题在于,
progress-bar
位于主hiding div
。
Current scenario: 当前场景:
If, 如果,
IsVisibleForm -- hides --> progress-bar -- hides IsVisibleForm-隐藏 -> 进度栏-隐藏
IsVisibleForm -- show --> progress-bar -- show IsVisibleForm-显示 -> 进度栏-显示
The above happens because progress-bar
is the child of IsVisibleForm
发生上述情况是因为
progress-bar
是IsVisibleForm
的子级
Solution: 解:
Move the progress-bar
out of the IsVisibleForm
div. 将
progress-bar
移出IsVisibleForm
div。
Since you have taken the progress-bar
inside the main div
the logic which you have used inside the init()
function is not working. 由于您已在
main div
使用了progress-bar
,因此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>
$http request is asynchronous you should use like this $ http请求是异步的,您应该这样使用
$scope.$apply(function(){
$scope.isLoading = false;
});
And as whole like this 像这样
<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>
And in your JS 在你的JS里
$scope.isLoading = true;
$http.get("/posts")
.success(function (data) {
$scope.$apply(function(){
$scope.isLoading = false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.