How to hide the label text when the value is empty?

Question

Within a table cell, I am listing several items that are populated using ng-repeat, using the structure below. However, for some entries, properties such as "user.favcolor" are blank. What's the easiest way to hide text such as "Favorite color:" in that case so that I don't end up with a row that has "Favorite color:" and no value beside it?

        <table>
            <thead>
                <tr>
                    <th>Price</th>
                    <th>Plan Contents</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="tip in tips">
                    <td>{{tip.priceMonthly}}</td>
                    <td><span>Name: {{user.name}}</span>
                        <span>ID: {{user.id}}</span>
                        <span>Favorite color: {{user.favcolor}}</span>
                    </td>
                </tr>
            </tbody>
        </table>

Answer 1

You can use the ng-show directive for this:

<span ng-show="user.favcolor">Favorite color: {{user.favcolor}}</span>

The ng-show works such that the element is only shown if the expression evaluates to true. An empty string here will evaluate to false hiding the entire element.

Alternatively, you can also specify a default value:

<span>Favorite color: {{user.favcolor || "Not specified" }}</span>

In this case, if user.favcolor evaluates to a false, it will print Not specified instead.