CODEWITHSUNDEEP
angularjsangular-ng-if
ebick
ebick

Reputation: 79

Trying to get a better understanding of ng-if

If you take a look at my small code snippet below, what I'm trying to do should be pretty obvious....not every record has this field, so on the ones that don't I want to hide it and the label. What I have here did not work.

        <table id="tablepress-1" class="tablepress tablepress-id-1" ng-repeat="agent in vm.agents | orderBy: 'id'" border="0">
        <tbody class="row-hover">
            <tr class="row-1 odd">
                <td class="column-1"><a href="http://larosacre.com/?page_id=1121"><img src="images\{{agent.image}}" alt="" class="aligncenter size-thumbnail wp-image-1116" data-recalc-dims="1" /></a></td>
                <td class="column-2">
                    {{agent.name}}<br />
                    Phone: {{agent.phone}}<br />
                    <p ng-if="{{agent.email}} != ''">E-Mail: {{agent.email}}</p><br />
                    {{agent.bio}}
                </td>
            </tr>
        </tbody>
    </table>

How should I approach this?

Thanks,

newbie

Upvotes: 2

Views: 123

Answers (1)

ccjmne
ccjmne

Reputation: 9628

What is given to the ngIf directive will be interpreted already, by being evaluated within the current scope. That is, you do not need to (in fact, you actually have not to) use the {{...}} marker here.

That is, simply using:

<p ng-if="agent.email != ''">E-Mail: {{agent.email}}</p>

... would do wonders. Although, since, when agent.email != '', then basically, agent.email is truth-y, being only evaluated to false in a boolean context if it is undefined or empty (or 0, but I believe that won't happen in your case).

What I'm trying to say is, simply use:

<p ng-if="agent.email">E-Mail: {{agent.email}}</p>

... and you're good to go!

Upvotes: 3

Related Questions