首页
学习
活动
专区
工具
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

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

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

相关·内容

  • AngularJS快速入门

    其最基本的几个概念如下所示: 客户端模板:我们过去使用的多页应用程序,我们将html和数据装配混合起来生成页面后发送到浏览器,而单页面的AJAX应用则是将html模板和数据都直接发送给浏览器,由客户端装配...迭代数据;ng-model绑定数据,这是个双向绑定,View的修改会影响到model,之后会有表单输入的例子再次强化这个概念;ng-click绑定单击事件处理函数。...大体来说,Angular程序一次请求的流程:用户请求应用起始页;浏览器向服务器发起http连接,加载index.html模板页面;Angular被加载到页面,等待页面加载完成,然后查找ng-app指令...,用于定义模板边界;之后Augular遍历模板,查找指令和绑定关系,触发注册监听器、执行DOM操作、获取服务器初始化数据;最后连接服务器请求其他数据(Ajax)。...表单输入 框架中使用表单元素非常简单,可以通过ng-model将表单元素绑定到模型属性上,达到双向绑定的目的,这部分和.NET数据绑定效果一致;表单提交时,ng-submit会自动阻止浏览器默认的

    2.5K50

    Angularjs基础(八)

    监控模型变量       $scope.test        验证模型变量的错误和完整性 AngularJS 包含     AngularJS ,你可以HTML包含HTML...HTML包含HTML 文件 服务端包含     大多服务脚本都支持包含文件功能 客户端包含     通过 JavaScript 有很多种方式可以 HTML 包含 HTML 文件。     ...通常我们使用 http 请求 (AJAX) 从服务端获取数据,返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素。     ...AngularJS 添加/移除class指令         ng-shwo         ng-hide         ng-class         ng-view         ...当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。     此外, 动画完成后,HTML 元素的类集合将被移除。

    2.9K60

    ng6HTTP拦截器里,异步请求数据,之后再返回拦截器继续执行用户请求的方法研究

    那么如何监测用户是“连续活动”的时候,且当前token超时后,系统能自动获取新token,并且之后请求中使用该新token呢?...简化一下表述:如何在拦截里,判断token失效了能自动请求新token,并且把新token赋予当前的拦截请求中去。...异步请求token也会走拦截器。         思路一: 同步http请求新token。  ...如果ng中有同步请求的方法,我认为它是可行的。如果有人知道同步怎么写,可以在下面留言。         思路二:委托一个新的Observable对象,接力实现。        ...不过我也趁此机会,探索一下拦截器的异步请求问题,在其它时候没准用的着吧

    1.9K20

    Angularjs基础(五)

    使用ng-options创建选项框     AngularJS 我们可以使用ng-option指令来创建一个下拉列表,列表通过对象和数组循环输出       实例:         <div...对的value           value key-value 对也可以是个对象;           实例         选择的值key-value 对的value ...表格显示数据       使用angular显示表格是非常简单的         实例           <div ng-myApp="myApp" ng-controller="customersCtrl...<em>请求</em>       <em>如果</em>你需要从不同的服务器(不同的域名)上获取<em>数据</em>就需要使用跨域<em>HTTP</em><em>请求</em>。       ...<em>在</em>现代浏览器<em>中</em>,为了<em>数据</em>的安全,所又<em>请求</em>被严格限制<em>在</em>同一域名下,<em>如果</em>需要调用不同站点<em>数据</em>,需要通过跨域来解决。       以下的PHP代码运行使用的网站进行跨域访问。

    3.3K50

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    ng-init -该指令初始化应用程序数据。 ng-model -此指令定义的模型,该模型是变量AngularJS使用。 ng-repeat -该指令将重复集合的每个项目的HTML元素。...2.1.1.2 ng-repeat属性         标签里面的ng-repeat="phone in phones"语句是一个 AngularJS 迭代器。...在这段代码,用户输入框输入的数据名字称作query,会立刻作为列表迭代器(phone in phones | filter:query`)其过滤器的输入。...ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。...angule jsng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新 http://www.oschina.net/question/2356458

    52680

    Angular企业级开发(3)-Angular MVC实现

    专业人员可以通过自身的专长分组: 控制器(Controller)- 负责转发请求,对请求进行处理。 视图(View) - 界面设计人员进行图形界面设计。...AngularJS应用,MVC设计模式通过JavaScript和HTML来实现。使用HTML定义视图,用JavaScript实现模型和控制器。...2.1Angular MVC的Views AngularJS应用,视图是使用HTML来创建,HTML可以是一个简单单独的页面,也可以是html代码片段。 一个简单的HTML页面: <!...含有ng-view的html文件如下: <!...Controllers 应用的控制器,本质上它是一个JavaScript的函数,用于衔接页面模板和逻辑代码,并通过添加对象和行为来增强模板作用域的功能在AngularJS,可以标签上使用ng-controller

    1.5K90

    Angular.js学习笔记(三)

    $location 服务,它可以使用 DOM 存在的对象,类似 window.location 对象,但 window.location 对象 AngularJS 应用中有一定的局限性。...ng-view 插入简单的 HTML 内容,则使用该参数:.when('/computers',{template:'这是电脑分类页面'})templateUrl:如果我们只需要在 ng-view...插入 HTML 模板文件,则使用该参数: 高级路由: 控制器传入参数routeParams用来代表路由中的值,传入参数route,用于switch(status)--'var status=routeParams.status...'函数的default来更新routeParams值为空 ,代码为: ## 如果连入第三方文件时不写协议的话: http://apps.bdimg.com/libs/angular.js/1.4.7...HTTP的方式部署的话,请求 http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js 如果是HTTPS的话,请求 https://apps.bdimg.com

    8.2K20

    【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

    以下是二者Script的最初调用顺序,   public文件夹下的index.html: 1 2 是不会被调用的(当然这里的是指放在ng-view...但是呢,如果你也使用了JQuery,而且关键的是,Script调用顺序如果你把JQuery放在了Angular JS前面调用(例如本文开头时我的做法),Angular JS会检查是否有JQuery...>   这样的话,每次处理ng-view时候,JQuery就不会执行里面的Script,从来不会导致Angular JS脚本被加载多次。   ...但这样不好,原因是Angular JS仍使用内部的JqLite,导致如果你想在Template Html执行变得不可能。 总结:   Google时,发现这个问题还是蛮多人遇到的。

    2.3K90

    AngularJS应用页面切换优化方案

    有一种非常常见的场景:切换至新页面后,需要通过AJAX调用从服务器请求一些数据,然后根据这些数据来展示页面。...如果未做任何处理,那么页面会先加载新页面的html模版,但此时模板数据model还并没有被请求,因此会有一段时间显示空数据,非常影响用户体验。...在这里我用了express来代替原来的http-server,并在客户端请求数据时延迟5秒再做出响应: ?...如果其中的一个或多个service是异步对象($q.defer)时,那么只有当这些异步操作都完成后,页面才会跳转。利用这一点,我们就可以页面跳转前先将手机详细信息数据请求到本地。...我们可以对ng-view应用AngularJS动画,phone-cat项目中,animation.css的下列代码实现了切换页面的淡入淡出动画: .view-frame.ng-enter, .view-frame.ng-leave

    1.9K100

    前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    1.1、内置服务 常见的内置服务如下: $http 发送http请求 $resource 创建一个可以RESTful服务器端数据源交互对象 $window 浏览器的window元素的jQuery包装 $...1.1.2、发送http请求服务 ($http) $http服务从AngularJS代码直接与Web服务器进行交互,底层是通过AJAX实现,与jQuery$.ajax类似 通过$http封装后的方法:...cars.splice(index,1); //cars数组删除下标从index开始的1条数据 res.json(cars); }); module.exports = router...Angular的post和put请求Content-Type: application/json默认情况下,jQuery传输数据使用Content-Type: x-www-form-urlencodedand...3.3、数据比较API ? 四、jQuery Lite jQuery Lite只是jQuery的一个简化版本,它直接内置于AngularJS

    6.1K30
    领券