ng-repeat 与在屏幕上手动键入的内容不同答案

【问题标题】：ng-repeat did not show same as type each manually on screenng-repeat 与在屏幕上手动键入的内容不同
【发布时间】：2014-03-13 05:58:42
【问题描述】：

昨天在stackoverflow上看到这个问题：

No spacing between bootstrap-labels with ng-repeat

问题所有者只想得到一个解决方案，所以我打开一个新问题来询问原因。

这里是plnkr

<span class="label label-primary" ng-repeat="tag in tags">{{tag}}</span>

这将被编译为

<!-- ngRepeat: tag in tags -->
<span class="label label-primary ng-scope ng-binding" ng-repeat="tag in tags">panel</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary ng-scope ng-binding" ng-repeat="tag in tags">angular</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary ng-scope ng-binding" ng-repeat="tag in tags">bootstrap</span>
<!-- end ngRepeat: tag in tags -->

我尝试手动输入每个

<!-- ngRepeat: tag in tags -->
<span class="label label-primary">panel</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary">angular</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary">bootstrap</span>
<!-- end ngRepeat: tag in tags -->

而且，这两个具有相同的 css，我在 Google Chrome 开发者工具上检查过。

我很好奇为什么这会引起不同的看法？

【问题讨论】：

标签： javascript css angularjs angular-ui-bootstrap

【解决方案1】：

Angular 将为 ng-repeat 重写 html。在您的手动情况下，如果您删除换行符并将其全部压缩在一起，您将获得与第一个相同的效果。 Chrome 也将其分解并显示为换行符，而实际上并非如此。

只需在 Firefox 和 HTML 面板中打开相同的 plnkr，检查“显示空白”，您会看到 angularjs 重写的那个没有空白。您的手动案例将包含导致标签之间间距的空格。

【讨论】：