CODEWITHSUNDEEP
angularjs
Ray Satadal
Ray Satadal

Reputation: 11

Conditional ng-show

Is there any way to put a condition in the following:

<h3 ng-show="ctrl.loggedIn">
{{ctrl.loggedInUser.FirstName + " " + ctrl.loggedInUser.LastName + " is logged in."}}
</h3>

that is if the ctrl.loggedInUser.FirstName is undefined or null then it wouldn't print.

Click here to visit the project on github.

Upvotes: 1

Views: 4646

Answers (4)

Ray Satadal
Ray Satadal

Reputation: 11

<div ng-switch on="ctrl.loggedInUser.FirstName == null || ctrl.loggedInUser.FirstName == undefined || ctrl.loggedInUser.FirstName == ''">
    <h3 ng-switch-when="true">Please log in.</h3>
    <h3 ng-switch-when="false">{{ctrl.loggedInUser.FirstName + " " + ctrl.loggedInUser.LastName + " is logged in."}}</h3>
</div>

this worked for me. thanks all for the ideas.

Upvotes: 0

Karthikeyan G
Karthikeyan G

Reputation: 31

You can use ng-show

<h3 ng-show="ctrl.loggedInUser.FirstName!=undefined || ctrl.loggedInUser.FirstName!=null">
{{ctrl.loggedInUser.FirstName + " " + ctrl.loggedInUser.LastName + " is logged in."}}
</h3>

Upvotes: 0

Faraz Babakhel
Faraz Babakhel

Reputation: 664

h3 will only show if ctrl.loggedInUser.FirstName have some value

<h3 ng-show="ctrl.loggedIn && ( ctrl.loggedInUser.FirstName!=null || (ctrl.loggedInUser.FirstName!='undefined')")>
{{ctrl.loggedInUser.FirstName + " " + ctrl.loggedInUser.LastName + " is logged in."}}
</h3>

you can also do like 

 <h3 ng-hide="!ctrl.loggedIn && (ctrl.loggedInUser.FirstName==null || (ctrl.loggedInUser.FirstName=='undefined')")>
    {{ctrl.loggedInUser.FirstName + " " + ctrl.loggedInUser.LastName + " is logged in."}}
    </h3>

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

yes you can. use ng-if to add conditions in DOM 

<h3 ng-show="ctrl.loggedIn" ng-if="ctrl.loggedInUser.FirstName">
    {{ctrl.loggedInUser.FirstName + " " + ctrl.loggedInUser.LastName + " is logged in."}}
</h3>

Upvotes: 1

Related Questions