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 不起作用 的相关文章

随机推荐