我正在定义我的数组,如下所示:
$scope.tt= [
{
"name" : "1",
"sel" : false
},
{
"name" : "2",
"sel" : false
},
{
"name" : "3",
"sel" : false
}
];
在我看来是这样的:
<div ng-repeat="mod in tt" ng- class="t text-center">
<img src="images/tt/{{mod.name}}.png"/>
<span class="tt">{{mod.name}}</span>
<div class="overlay" ng-show="mod.sel">
<div class="range-slider" data-slider data-options="start: 1; end: 10;">
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
它可以工作并显示我的所有三个项目名称和相关图像,但随后出现错误:
获取http://localhost:63342/tt/images/tt/%7B%7Bmod.name%7D%7D.png 404(未找到)
好像有 4 项而不是 3 项?
什么可能导致这种情况?
最佳答案
发生此错误是因为在 Angular 启动并插入变量之前,浏览器正在加载您的 src。这意味着 {{mod.name}}
被按字面意思解释,当您尝试加载它时,会导致 URL 出现 404 错误。
您应该使用 ng-src 代替。 https://docs.angularjs.org/api/ng/directive/ngSrc
关于javascript - Angular JS - Ng-Repeat 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28456509/