在我的JSON数据加载到AngularJS之前“加载”或“等待”消息

时间:2016-06-02 14:54:08

标签: javascript angularjs json smarty loading

我已经看到了一些关于如何在使用$ http get()请求从URL或单独文件加载JSON数据之前放置等待消息的解决方案,但我还没有在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>

提前致谢!

1 个答案:

答案 0 :(得分:1)

只需在示波器中设置一个标志,以指示您是否已加载数据:

<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>

然后,当您完成加载数据后,您的控制器可以将该标志设置为true。 e.g:

app.controller('mysearchController', ['$scope', function($scope){
    $scope.loaded = false;
    $http.get('...').then(function(response) {
         $scope.products = response.data;
         $scope.loaded = true;
    });
]);

显然,如果你通过其他一些机制加载数据,你的代码看起来就不会像这样,但想法是一样的,只需在数据完全加载时切换一个标志。