Angularjs重复不显示Space

时间:2014-09-14 05:24:46

标签: html css angularjs twitter-bootstrap angularjs-ng-repeat

我试图使用Angularjs重复标记数据。 静态html显示锚标记之间的空格,但是当我尝试用" ng-repeat"我没有看到空间,锚标签没有包裹在引导程序中#34; 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>

1 个答案:

答案 0 :(得分:0)

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

您的角度版本缺少标签周围的任何类型的空白区域,因为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. 您可以在已经
  2. 标签内的元素上应用这些类
  3. 他们没有设置任何保证金 - 请查看Chrome Dev Tools或Firebug或您有什么