Angular ng-if for checking empty string not working

Question

In my view, I have the below code to display some data from angular scope variables. The first two lines work fine. They display data from the scope variables but the line from ng-if does not display. What is wrong with my ng-if condition?

<div ng-controller="PaymentCtrl">

    <h3>Payment successfully posted {{PaymentID}}</h3>

    <h3> Receipt number {{ReceiptNumber}} </h3>

    <div ng-if="{{ReceiptNumber}}">
        <h3>Receipt generated with receipt number {{ReceiptNumber}}</h3>
    </div>

</div>

Remove the {{/}}, ng-if takes an expression, not an interpolated value. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jun 5, 2015 at 21:10
@NikosParaskevopoulos You should submit that as the answer perhaps with a slightly more descriptive explanation. — Matt
– Matt, Commented Jun 5, 2015 at 21:12

scniro · Accepted Answer · 2015-06-05 22:04:59Z

3

As mentioned, ngIf takes an expression.

<ANY ng-if="expression"> ... <ANY>

See the AngularJS expression docs for more information on what this entails exactly. In your example, you are instead supplying an interpolated value. Try the following...

<div ng-if="ReceiptNumber">
    <h3>Receipt generated with receipt number {{ReceiptNumber}}</h3>
</div>

JSFiddle Link - demo comparing both wrong and correct appreach

answered Jun 5, 2015 at 22:04

scniro

17k8 gold badges67 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ng-if for checking empty string not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related