If Statement (Ngif) in Angular JS

Question

I have this code which shows the username and picture of a Facebook user when connected to this application.

 <div class="item item-avatar" ng-controller="LoginCtrl" ng-show="showProfile">
      <img src="{{user.picture}}">
        <h2>{{user.name}}</h2>
        <p>Reporter</p>
  </div>

So, if the user is logged in using Facebook with the app, the username and profile picture will show... {{user.picture}} & {{user.name}} so what I am trying to do is to show a different case where the user is not logged in... If the user is not logged in, I want to show just plain text like "No logged in user."

So tried these codes and failed to get it

 <div ng-if="user.name !== '{{user.name}}'">
      <div class="item item-avatar">
          <img src="https://media.licdn.com/mpr/mpr/p/5/005/06f/16e/232e2d4.jpg">
          <h2>No logged in user</h2>
      </div>
 </div>


 <div ng-if="user.name === '{{user.name}}'">
      <div class="item item-avatar" ng-controller="LoginCtrl" ng-show="showProfile">
          <img src="{{user.picture}}">
          <h2>{{user.name}}</h2>
          <p>Reporter Name</p>
    </div>
 </div>

AND

<div ng-repeater="user in users">
    <div>{{user.name}}</div>
    <div ng-show="isExists(user)">available
        <div class="item item-avatar" ng-controller="LoginCtrl" ng-show="showProfile">
            <img src="{{user.picture}}">
              <h2>{{user.name}}</h2>
              <p>Reporter</p>
        </div>
    </div>
    <div ng-show="!isExists(user)">No logged in user</div>
</div>

Any solution or alternative from using ng-if or ng-repeater? Not really familiar with AngularJS.

"Not really familiar with Angular JS" - you'd better get familiar, it's a bumpy ride unless you invest in some learning via NG-Book or some other resource! — random_user_name
– random_user_name, Commented Jan 13, 2016 at 2:46
Also, if your directive / controller are set up right, your ng-if should be simple: <div ng-if="user.name'"> (to show if the user name is set) and <div ng-if="! user.name"> (to show if the user name is not set) — random_user_name
– random_user_name, Commented Jan 13, 2016 at 2:47
Do you have a way to determine if user is logged in or not?, Can you post your controller code (specifically for the isExists(user) function)? — slackmart
– slackmart, Commented Jan 13, 2016 at 2:49
Why are you trying to compare something to itself (incorrectly)? both "user.name"s refer the $scope.user.name or this.user.name, depending on how you use your controller. — ryanlutgen
– ryanlutgen, Commented Jan 13, 2016 at 3:41

RobertAKARobin · Accepted Answer · 2016-01-13 03:35:59Z

1

You don't use the "handlebars" syntax inside Angular expressions. For instance, this is correct:

<div id="{{user.name}}" ng-if="user.name">{{user.name}}</div>

This is incorrect:

<div id="{{user.name}}" ng-if="{{user.name}}">{{user.name}}</div>

Make sure you keep your web browser's Javascript console open. This will highlight any errors for you.

The comparison you're using -- "user.name !== '{{user.name}}'" -- won't work. More specifically, user.name will never equal '{{user.name}}'. That's because you're telling Angular to compare the username with the actual string "{{user.name}}". It's the same as doing something like this:

var myVariable = 42;
if(myVariable === "myVariable"){
  // do something
}

I'm not entirely sure what you're going for there, anyway... The username is always going to equal the username, in the same way that myVariable will always equal myVariable, and 42 will always equal 42.

var myVariable = 42;
myVariable === "myVariable";
// false
myVariable === myVariable;
// true
42 === "42";
// false
42 === 42;
// true
42 == "42";
// true
myVariable === 42;
// true
myVariable === "42";
// false
myVariable == "42";
// true
myVariable === true;
// false
myVariable == true;
// false

If you just want to check whether user.name exists, then try this syntax:

<div ng-if="user.name">The user is logged in!</div>
<div ng-if="!user.name">The user is not logged in.</div>

edited Jan 13, 2016 at 3:35

answered Jan 13, 2016 at 2:50

RobertAKARobin

4,3044 gold badges29 silver badges48 bronze badges

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

2 Comments

KylieJ Over a year ago

Can I do it this way? Example: <div id="{{user.name}}" ng-if="user.name !== 'user.name' "> or <div id="{{user.name}}" ng-if="user.name !== user.name "> (w/o quotes)

RobertAKARobin Over a year ago

@KylieJ I just edited my response to address your comment!

Collectives™ on Stack Overflow

If Statement (Ngif) in Angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related