What?

Remove elements from the DOM completely instead of just hiding it.

Using ng-show

  • First
  • Middle
  • Last

Using ui-if

  • First
  • Middle
  • Last

Why?

In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

How?

<style>
.piped-list li {
    display: inline-block;
    border-left: 2px solid;
    margin-left: 5px;
    padding-left: 10px;
}
.piped-list li:first-child {
    border-left: none;
    margin-left: 0;
}
</style>

<ul class="piped-list">
    <li ui-if="false">First</li>
    <li>Middle</li>
    <li>Last</li>
</ul>