ng-repeat 与 ng-include 不起作用

2024-04-12

我正在尝试使用ng-repeat其中包括一个ng-include。问题是 ng-repeat 中的第一个元素只是ng-include模板中没有任何数据ng-repeat已填写。有没有办法可以以某种方式绑定模板ng-include所以它适用于第一个ng-repeat?

<div ng-repeat="item in items">
    <div ng-include src="'views/template.html'"></div>
</div>

例如,如果我的ng-repeat包含 10 个项目,那么渲染的第一个项目将只是空模板。项目 2-10 将按其应有的方式呈现。我究竟做错了什么?


首先确保项目的第一个索引中包含的数据实际上具有您想要的数据。

解决您的问题的一个可能的解决方案是简单地不显示 ng-repeat 的第一个索引:

<div ng-repeat="item in items" ng-show="!$first">
   <div ng-include src="'views/template.html'"></div>
</div>

这可能实际上并不能解决问题的根源,但它仍然可以让您的应用程序更像您所期望的那样工作。


另一种可能的解决方案:

<div ng-repeat="item in items" ng-include="'views/template.html'"></div>

请参阅此处的示例:

http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview


为了更好地衡量,还有一种可能的修复方法:

使用组件:

html:

<div ng-repeat="item in items">
   <my-include></my-include>
</div>

js:

angular.module("app").directive("myInclude", function() {
return {
    restrict: "E",
    templateUrl: "/views/template.html"
}
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-repeat 与 ng-include 不起作用 的相关文章

  • 当我的网页上有一个持续时间计数器时,AngularJS 有什么帮助吗?

    我有一个使用 Angular ui router 的应用程序 当路由器设置为某种状态时 我希望将计时器设置为例如 2 小时 当它设置为另一个状态时 我想让计数器倒计时 我希望在屏幕上显示剩余时间 有谁有关于如何实现此功能的代码示例吗 如果有
  • AngularJS 插值错误

    我正在显示房间的属性 作为我正在开发的房间管理应用程序的一部分 这是输出 如您所见 Beamer 英文投影仪 的值为 Sony lamp 01 12 2013 此输出是正确的 但当我打开控制台时 我看到一些有关插值的错误 更大的分辨率 Ca
  • 如何以最少的查询次数获取帖子列表和关联标签

    我的表格结构如下 标签 更多的是一个类别 id 标签名称 描述 slug POSTS ID 标题 网址 邮戳 id idPost idTag USERS ID 用户名 userSlug VOTES id idPost idUser 每个帖子
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 为什么 angularjs bootstrap datepicker 选择前一天?

    我在用着AngularJS引导日期选择器指令 http angular ui github io bootstrap 当我从模型中设置日期时 它会选择所选日期之前的一天
  • AngularJS 仅在解析时返回两个 http get 请求

    我有一个 Angular 应用程序 在控制器中我需要调用一个发出两个 http get 请求的函数 并且我需要这个函数在解析这些值时返回这些值 我无法在 routeProvider 中解析它们 因为此函数需要在同一控制器中获取值 我展示了控
  • ngRepeat 中的函数执行过于频繁

    我有三个tabs里面有不同的htmlng include 这些选项卡使用以下方式显示ng repeat 只有一个 HTML 模板包含函数调用 但它执行了 3 次 每个模板执行一次 ng repeat迭代 这里出了什么问题以及如何解决它 va
  • 在 Android Webview 中加载 Angular JS 网站的问题

    大家好我正在尝试加载GTV http gtvqa com Android WebView 中 它在移动浏览器中加载得很好 但在 webview 中则不行 这是我的代码 WebView theWebPage new WebView this
  • HTML5 URL 模式下 AngularJS 的 Flask 路由

    我有一个通过 Flask 提供服务的 AngularJS 应用程序 我使用的是 HTML5 路由模式 因此需要将多个 URL 重定向到客户端应用程序 我不确定如何进行通配符匹配才能正确执行此操作 目前我只是匹配多个级别的路径 如下所示 ap
  • 切换按钮不适用于 AngularJS 和 Angular ui Bootstrap

    切换按钮出现 但不起作用 我现在在网上也有相同的代码 但它不起作用 但在 Plunker 中它可以工作 Plunker 切换按钮正在工作 http plnkr co edit R5F5D1FGyHiv9X1cfOoa p preview 在
  • 如何在 AngularJS SPA 应用程序中处理浏览器刷新?

    我的 AngularJS 应用程序使用 用户界面路由器 一个index html 文件 所有登录和数据调用都会发送到一个 ASP NET Web 控制器 其 URL 以 api xxx 开头 当用户输入 myapp com 时 服务器ind
  • AngularJS 指令的完整列表?

    我正在学习 AngularJS 是否有所有开箱即用指令的完整列表 这FAQ http docs angularjs org misc faq提及ng repeat ng show and ng class 但我感觉还有更多 奇怪的是我找不到
  • AngularJS 创建全局键盘快捷键的方式是什么?

    我想我应该使用指令 但将指令添加到正文似乎很奇怪 但监听文档上的事件 执行此操作的正确方法是什么 更新 找到 AngularJS UI 并看到their https docs angularjs org api ng directive n
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 为什么混合插值和表达式是不好的做法

    来自文档 在表达式内嵌入插值标记 Note AngularJS 指令属性采用任一表达式or带有嵌入表达式的插值标记 已经被考虑了不好的做法将插值标记嵌入表达式中 AngularJS 开发人员指南 插值 https docs angularj

随机推荐