angularjs - AngularJS 表格闪烁
问题描述
我有一个简单的 AngularJS 应用程序,它在用户登录后显示一个包含 ng-repeat 数据的表。我有一个问题,登录后,表格会短暂显示空白行,然后显示实际的数据行。对于如何解决这个问题,有任何的建议吗?
这是登录的控制器:
$scope.login = function(user) {
loginSrvc.login(user).then(function(response) {
if (response == "authentication failed") {
$scope.error = true;
$scope.user = {};
$location.path("/");
} else {
if (response.group_name == "On Site Registration"){
var data = {
event: response.zk_event_id,
group: response.zk_group_id
};
$scope.getAvailableCamper(data);
}
else if (!response.zk_group_id) {
$location.path("/form/" + response.zkp_camper_id);
}
else {
$location.path("/dashboard/" + response.zk_event_id + "/" + response.zk_group_id);
}
}
})
}
$scope.getAvailableCamper = function(data) {
dashboardSrvc.fetchGroup(data).then(function(response){
var findAvailableCamper = _.find(response.data, {status: null});
console.log("this is find", findAvailableCamper);
var id = findAvailableCamper.zkp_camper_id;
$location.path("/onSiteForm/" + id);
})
}
这是表的控制器:
$scope.campers = function() {
$scope.camper = loginSrvc.getCampers();
}
$scope.campers();
$scope.fetchCampers = function(id) {
dashboardSrvc.fetchCampers(id).then(function(response){
$location.path("/form/" + id);
})
}
这是表格的html代码:
<tr ng-repeat="campers in camper">
<td>{{$index + 1}}</td>
<td>{{campers.name_first}}</td>
<td>{{campers.name_last}}</td>
<td><button type="submit" name="submit" ng-click="register(campers)" class="btn btn-success" role="button" ng-hide="campers.status == 'Submitted' " ng-disabled="!(!!campers.name_first && !!campers.name_last && !!campers.gender && !!campers.city && !!campers.date_of_birth && !!campers.email && !!campers.emergency_cell_phone && !!campers.emergency_contact_first_name && !!campers.emergency_contact_last_name && !!campers.emergency_home_phone && !!campers.relationship_to_camper && !!campers.first_time_flag )">Submit</button> <p ng-show ="campers.status == 'Submitted'" > {{campers.registration_date | date: 'medium'}}
</p>
</td>
<td>{{campers.status}}</td>
<td>
<button ng-click="fetchCampers(campers.zkp_camper_id)" type="submit" name="view" class="btn btn-default" role="button" ng-show="campers.status == 'Submitted' "><span class="glyphicon glyphicon-eye-open"></span></button>
<button ng-click="fetchCampers(campers.zkp_camper_id)" type="submit" name="edit" class="btn btn-default" role="button" ng-hide="campers.status == 'Submitted' " ><span class="glyphicon glyphicon-edit"></span></button>
<button type="button" ng-click="setValue(campers.zkp_camper_id)" name="deleteModalLauncher" id="deleteModalLauncher" class="btn btn-danger" role="button" data-toggle="modal" data-target="#deleteModal" ng-hide="campers.status == 'Submitted' " ><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</td>
</tr>
我真的很感激帮助!谢谢!
解决方案
有一个指令可以最小化角度循环在检查绑定和所有内容时所做的闪烁。它被称为 ng-cloak,它可以添加到您视图上的任何元素中。
更多信息:https ://www.w3schools.com/angular/ng_ng-cloak.asp
...
您还可以使用在内容完全加载时触发的 angularjs 事件并设置标志 ex。加载 = true 然后使用加载变量的 ng-show。
控制器 :
$scope.$on('$viewContentLoaded', function(){
$scope.loaded = true;
});
看法 :
<table ng-show="loaded">
.....
</table>
希望有帮助!
推荐阅读
- android - 定位 S+(版本 10000 及更高版本)要求在创建 PendingIntent 时指定 FLAG_IMMUTABLE 或 FLAG_MUTABLE 之一
- node.js - 我遇到了一个非常奇怪的 MongoDB 错误
- seaborn - 追溯(seaborn)
- javascript - ChartJS destroy() 不适用于多个图表
- java - mvn build failures:编译失败
- java - 使用 Java 8 中的另一个数组测试数组的正确排序
- python - %run 不适合我(从另一个笔记本运行一个笔记本)
- python - 将列中的每一行与同一列中的每一行进行比较,如果匹配率> 90,则使用python中的模糊逻辑删除该行
- python - 获取'AttributeError:类型对象'BeautifulSoup'在python代码中没有属性'BeautifulSoup'
- ios - 防止在文本编辑器中删除用户