在我的 JSON 数据加载到 AngularJS 之前 "loading" 或 "wait" 消息
"loading" or "wait" message before my JSON data loads in AngularJS
我已经看到一些关于如何在 JSON 数据从 URL 或使用 $http get() 请求的单独文件加载之前放置等待消息的解决方案,但我没有在 HTML 文件本身中以 JSON 格式看到。在这种情况下,{$data} 是我的 JSON 数组,看起来像这样 {"title":"A2378","sub_name":"A2333", .....} .在我的 json 加载到我的 html 文件之前,如何放置等待消息的任何简单方法?
<script type="text/javascript">
var app= angular.module('mysearch', []);
app.controller('mysearchController', ['$scope', function($scope){
$scope.products = {$data};
]);
</script>
<div ng-app="mysearch">
<div ng-controller="mysearchController">
<div ng-repeat="item in products">
{{item.sub_name}}
</div>
<p> {{item.title}}</p>
</div>
</div>
提前致谢!
只需在您的作用域中设置一个标志以指示您是否已加载数据:
<div ng-app="mysearch">
<div ng-controller="mysearchController">
<div ng-if="!loaded">Loading...</div>
<div ng-if="loaded">
<div ng-repeat="item in products">
{{item.sub_name}}
<p> {{item.title}}</p>
</div>
</div>
</div>
</div>
然后您的控制器可以在您完成数据加载后将该标志设置为真。例如:
app.controller('mysearchController', ['$scope', function($scope){
$scope.loaded = false;
$http.get('...').then(function(response) {
$scope.products = response.data;
$scope.loaded = true;
});
]);
显然,如果您通过其他机制加载数据,您的代码看起来不会完全像这样,但想法是一样的,只需在数据完全加载时切换一个标志。
我已经看到一些关于如何在 JSON 数据从 URL 或使用 $http get() 请求的单独文件加载之前放置等待消息的解决方案,但我没有在 HTML 文件本身中以 JSON 格式看到。在这种情况下,{$data} 是我的 JSON 数组,看起来像这样 {"title":"A2378","sub_name":"A2333", .....} .在我的 json 加载到我的 html 文件之前,如何放置等待消息的任何简单方法?
<script type="text/javascript">
var app= angular.module('mysearch', []);
app.controller('mysearchController', ['$scope', function($scope){
$scope.products = {$data};
]);
</script>
<div ng-app="mysearch">
<div ng-controller="mysearchController">
<div ng-repeat="item in products">
{{item.sub_name}}
</div>
<p> {{item.title}}</p>
</div>
</div>
提前致谢!
只需在您的作用域中设置一个标志以指示您是否已加载数据:
<div ng-app="mysearch">
<div ng-controller="mysearchController">
<div ng-if="!loaded">Loading...</div>
<div ng-if="loaded">
<div ng-repeat="item in products">
{{item.sub_name}}
<p> {{item.title}}</p>
</div>
</div>
</div>
</div>
然后您的控制器可以在您完成数据加载后将该标志设置为真。例如:
app.controller('mysearchController', ['$scope', function($scope){
$scope.loaded = false;
$http.get('...').then(function(response) {
$scope.products = response.data;
$scope.loaded = true;
});
]);
显然,如果您通过其他机制加载数据,您的代码看起来不会完全像这样,但想法是一样的,只需在数据完全加载时切换一个标志。