gpt4 book ai didi

javascript - 如何隐藏后台加载的数据?

转载 作者:行者123 更新时间:2023-11-28 04:42:57 28 4
gpt4 key购买 nike

我目前正在 Ionic 框架下的 AngularJS 中开发移动应用程序,并且想知道如何隐藏用户加载我的某些页面?不仅在列表级别,而且在包含产品详细信息或产品表等的页面上。 :)

我知道加载系统(ionicLoading)可以一直使用到数据加载完毕,但是当加载太多的时候就不太干净了。

如果您有除了加载之外的建议或技巧,我会捕获:)

最佳答案

我常用的技巧是将 $scope 变量设置为 false,然后每当我等待时将其设置为 true已经完成了。通常,它位于 promise 内,但为了演示,我们将使用 $timeout

有了 boolean 变量,我们就可以使用 Angular 内置的 ng-hideng-show 指令来控制哪些 DOM 元素根据我们的逻辑隐藏/显示。

在此处的示例中,$scope.loadedfalse,直到我们的工作完成(此处,仅使用 5 秒的 $timeout 进行模拟>)

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

$scope.loaded = false;

//Simulate loading

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


});
.container {
border: solid 1px #ccc;
background: #eee;
margin: auto;
max-width: 800px;
text-align: center;
font-family: Verdana;
padding: 20px 0 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

<div class="container">
<div ng-hide="loaded">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<p>Loading...</p>
</div>

<div ng-show="loaded">
<i class="fa fa-check fa-3x fa-fw"></i>
<p>All done.</p>
</div>
</div>


</body>

</html>

Plunker 镜像在这里:http://plnkr.co/edit/zEmdKQ3QBCpqORsb6RdT?p=preview

关于javascript - 如何隐藏后台加载的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43616834/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com