首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果数据来自$http请求,ng-repeat在ng-view中不起作用

问题:如果数据来自$http请求,ng-repeat在ng-view中不起作用。

答案:当数据来自$http请求时,ng-repeat在ng-view中可能不起作用的原因是由于异步加载数据导致ng-repeat指令在数据加载之前就已经执行完毕。为了解决这个问题,可以采取以下几种方法:

  1. 使用ng-if指令:可以在ng-view中使用ng-if指令来判断数据是否已经加载完成,只有在数据加载完成后再渲染ng-repeat指令。示例代码如下:
代码语言:html
复制
<div ng-view>
  <div ng-if="dataLoaded">
    <div ng-repeat="item in data">{{ item }}</div>
  </div>
</div>

在控制器中,可以通过在$http请求成功后设置$scope.dataLoaded = true来表示数据已加载完成。

  1. 使用resolve属性:在路由配置中使用resolve属性来确保数据加载完成后再渲染ng-view中的内容。示例代码如下:
代码语言:javascript
复制
$routeProvider
  .when('/view', {
    templateUrl: 'view.html',
    controller: 'ViewController',
    resolve: {
      data: function($http) {
        return $http.get('data.json').then(function(response) {
          return response.data;
        });
      }
    }
  });

在控制器中,可以通过注入resolve中的数据来使用。

  1. 使用ng-init指令:可以在ng-view中使用ng-init指令来初始化数据,并在数据加载完成后再渲染ng-repeat指令。示例代码如下:
代码语言:html
复制
<div ng-view>
  <div ng-init="getData()">
    <div ng-repeat="item in data">{{ item }}</div>
  </div>
</div>

在控制器中,可以定义一个getData函数来获取数据,并在数据加载完成后设置$scope.data

推荐的腾讯云相关产品:腾讯云云服务器(CVM)是一种可弹性伸缩的云计算基础设施服务,提供了丰富的计算、存储、网络等资源,适用于各种场景的应用部署。腾讯云云服务器产品介绍链接地址:https://cloud.tencent.com/product/cvm

请注意,以上答案仅供参考,具体解决方法可能因实际情况而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券