Angularjs重复不显示空间

Question

我正在尝试使用 Angularjs 为标签重复数据。 静态 html 显示锚标记之间的空格，但是当我尝试用“ng-repeat”替换它们时，我看不到空格并且锚标记没有包裹在引导程序“col-md-3”中。

我无法确定 Angularjs 是否延迟渲染 html 元素，因此无法正确应用 css。

静态HTML： 这呈现格式正确：

<a href="#"><span class="label label-dark">Books</span></a>
<a href="#"><span class="label label-dark">Tech</span></a>
<a href="#"><span class="label label-dark">New</span></a>

这不是：

<a href="#" data-ng-repeat="tag in product.Tags"><span class="label label-dark">{{tag.Name}}</span></a>

Answer 1

您的静态 HTML 会在元素之间显示空格，因为标记中的标记之间存在 空格 - 在这种情况下为换行符。

您的 Angular 版本在标签周围缺少任何类型的空格，因为 ng-repeat 不会自行插入任何空格。

注意this plnkr的区别：

<!-- this: -->
<span>a</span>
<span>b</span>

<!-- will not display the same as this: -->
<span>a</span><span>b</span>

您使用的 CSS 类与此处无关，因为：

1. 您已将类应用于 a 标签内的元素
2. 他们没有设置任何边距 - 使用 Chrome 开发工具或 Firebug 或你有什么检查