Question

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

有解决方法吗？

谢谢。

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;
}

Answer 1

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

你应该重新考虑你的布局：也许你真的不需要桌子，你可以选择div。

Answer 2

尝试使用div而不是tr的东西，然后你可以给每个div这个类（另外，你称两次ng-repeat，我认为你不想这样做）

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

Answer 3

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

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

祝你好运。

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

3 个答案: