角度 ng-repeat 和 inline-block答案

【问题标题】：angular ng-repeat and inline-block角度 ng-repeat 和 inline-block
【发布时间】：2015-06-19 06:55:03
【问题描述】：

我继承了一些在表单中使用水平列表的代码：

<ul>
  <li>...</li>
  <li>...</li>
</ul>

<li> 是内联块。我需要用 ng-repeat 填充这些列表：

<ul>
  <li ng-repeat="item in items">...</li>
</ul>

为了避免行内块元素之间的（众所周知的）间隙，它们必须写成：

<li>...</li><li>
...</li>

或者：

<li>...</li><!--
--><li>...</li>

但我不知道如何使用 ng-repeat 来实现！任何人？ :)

P.S.：我读过this。我想知道是否有一个优雅的“特定角度”解决方案。

【问题讨论】：

【解决方案1】：

您可以通过应用 css 规则来管理它们：

li{
display: inline-block;
margin-right: -4px;
}

或者，如果您不想使用负边距，则可以使用 float: left; 代替 inline-block。

但是，这会更昂贵。我认为另一个解决方案是使用 ng-repeat-start 和 ng-repeat-end，如下所示：

<ul>
  <li ng-repeat="item in items">...</li><!--
  <myDir ng-repeat-end>--></myDir>
</ul>

可能你需要使用&gt; 而不是> 等等。并使用 compile 函数删除元素，以便使用 element.unwrap() 仅保留 -->

我不确定上述方法能否按您的要求正常工作。你可以在你的项目中尝试一次，然后告诉我。

【讨论】：

【解决方案2】：

如果我们想乱用 css 选项...

ul {
   font-size:0;
}


li {
   display:inline-block;
   font-size:12pt;
}

【讨论】：