html - Angularjs 重复不显示空间

Question

我正在尝试使用 Angularjs 为标签重复数据。静态 html 显示 anchor 标记之间的空间，但是当我尝试用“ng-repeat”替换它们时，我看不到空间，并且 anchor 标记没有包装在 Bootstrap “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 或你有什么检查