我在前端完成了数据加载部分,我也试图把页面加载部分(进度条)。但是,它没有以正确的方式工作。我请求任何人帮助我......
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);
});
三江源
答案 0 :(得分:0)
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>
.
.
答案 1 :(得分:0)
问题是,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>
答案 2 :(得分:0)
$ 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);