angularjs - ng-repeat 破坏了 .form-inline 中的 Bootstrap 样式

Question

我正在尝试使用 ng-repeat 指令向内联表单添加按钮。 它可以工作，但使用 ng-repeat 时按钮之间的间距会丢失。 如果我删除 ng-repeat 并自己为按钮添加完全相同的 html，则按钮之间的间距就可以了。

这里是jsfiddle .

这很奇怪，因为生成的 html 是完全相同的。

Answer 1

让我们看一下渲染的 HTML...

首先是非 Angular :

<div class="form-inline">

    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>
    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>
    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>

</div>

现在是 Angular:

<div class="form-inline ng-scope" ng-controller="MyCtrl">

    <!-- ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">123</span>
        </button>
    </div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">456</span>
        </button>
    </div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">789</span>
        </button>
    </div><!-- end ngRepeat: button in buttons -->

</div>

看出区别了吗？手写 HTML 中的按钮包装器 div 之间存在换行符和代码对齐空格，但 ng-repeat 渲染的 HTML 中没有换行符和代码对齐空格。这些换行符和空格在视觉上呈现为每个 div 之间的单个空格。这可以通过删除手写 HTML 上的 div 之间的换行符来演示。我相信 Bootstrap 的目的是渲染按钮之间没有空间，除非明确定义。

This other question addresses how to eliminate the spaces