如何使角度显示为空<p>标签

How to make angular display an empty <p> tag?

本文关键字：lt gt 标签 何使角 显示      更新时间：2023-09-26

我正在使用ng repeat，并试图创建一个悬停时具有特定边框的段落元素，即使该元素本身为空。但是，当段落元素为空时，就没有悬停功能。"检查元素"工具根本没有显示段落标记的存在。

有变通办法吗？

谢谢。

JS:

var members = 
[
 {name: "John", dod: "December 8, 1980"},
 {name: "Paul", dod: ""},
 {name: "George", dod: "November 29, 2001"},
 {name: "Ringo", dod: ""}
];

HTML:

<table>
  <tr ng-repeat='member in members'>
    <p class='hoveroutline' ng-repeat="member in members">
      {{member.dod}}
    </p>
  </tr>
</table>

CSS：

.hoveroutline:hover{
    border: 2px solid black;
}

您将p元素放入tr中。这是无效的标记，浏览器肯定会拒绝像您期望的那样呈现它。使用td（或th）作为tr的直接子级。

您应该重新考虑您的布局：也许您并不真正需要表，您可以使用div。

尝试使用div而不是tr的方法，然后可以为每个div指定该类（另外，你叫ng repeat两次，我认为你不想这么做）

<div class="hoveroutline" >
    <p ng-repeat="member in members">
      {{member.dod}}
    </p>
</div>

除了上面所说的，如果ng repeat为空，它将不会呈现任何内容，围绕它的解决方案是有一个空的p段落，只有当成员为空时才可见

<p ng-repeat="member in members">
    {{member.dod}}
</p>
<p ng-show="!members || members.length === 0"></p>

祝你好运。

相关文章：