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.

Answer 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>