How to apply if else in html using angular

Question

My code

<span data-ng-repeat="s in d.sInfo track by $index" title="{{ s.sFirstName }} {{ s.sLastname }}">

<strong>{{ s.sFirstName }} {{ s.sLastname }}</strong> ({{ s.permission }})<br>

</span>

What i want is that if login user and shared user are same then i will show "YOU"

i am trying something like this ,

<strong>{{ s.sFirstName }} {{ s.sLastname }} || s.name == s.FirstName s.Lastname |"YOU"</strong> ({{ s.permission }})

I can do a loop in controller .But is there any way to achieve this in view itself

Evandro Silva · Accepted Answer · 2014-06-06 14:29:06Z

2

Try using the ng-if directive for that

<strong ng-if="!yourConditionHere">{{ s.sFirstName }} {{ s.sLastname }}</strong>
<strong ng-if="yourConditionHere">YOU</strong>

Replace yourConditionHere with your condition.

answered Jun 6, 2014 at 14:29

Evandro Silva

1,3921 gold badge15 silver badges29 bronze badges

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

Comments

gkalpak · Accepted Answer · 2014-06-06 14:36:03Z

1

It doesn't look nice (in this case), but it might prove useful in other situation (with more compact expressions): You can use a ternary operator (cond) ? expr : expr

<strong>{{
    ((u.firstname===user.firstname)&&(u.lastname===user.lastname))?
            'YOU':
            u.firstname+' '+u.lastname}}
</strong>

See, also, this short demo.

NOTE

The other approaches mentioned (e.g. using ngShow, ngIf etc) are viable solutions, but they involve the creation/destruction/manipulation of additional DOM elements, which might have a noticable impact on performance if the users list grows big.

BTW, you could also use ngSwitch to the same end.

answered Jun 6, 2014 at 14:36

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Comments

Fizer Khan · Accepted Answer · 2014-06-06 14:40:31Z

You can use ng-if or ng-show or ng-hide directives or scope function

Using ng-if directive'

  <strong ng-if="s.FirstName"> {{ s.sFirstName }} {{ s.sLastname }} </strong>
  <strong ng-if="!s.FirstName"> You </strong>

Using ng-show directive'

  <strong ng-show="s.FirstName"> {{ s.sFirstName }} {{ s.sLastname }} </strong>
  <strong ng-show="!s.FirstName"> You </strong>

Using ng-hide directive'

  <strong ng-hide="!s.FirstName"> {{ s.sFirstName }} {{ s.sLastname }} </strong>
  <strong ng-hide="s.FirstName"> You </strong>

Using Scope function

In your case, you can also use scope function to get the name

  <strong> {{getName(s)}} </strong>


  $scope.getName = function (s) {
     if (s.FirstName) return s.FirstName + ' ' + s.LastName;
     return 'You';
  }

DrDyne · Accepted Answer · 2014-06-06 14:55:09Z

1

ng-if works just fine.

You can also set up a filter that returns the user display name, to avoid putting logic in your markup

I am setting up a jsfiddle to show you an example.

Edit:

There you go

http://jsfiddle.net/jN3Pt/1

angular.filter('userDisplayName', function(loggedInUser) {
  return function(user) {
    if ( loggedInUser.firstName === user.firstName ) return "YOU";
    return user.firstName
  };
});

edited Jun 6, 2014 at 14:55

answered Jun 6, 2014 at 14:43

DrDyne

1,6021 gold badge13 silver badges10 bronze badges

Comments

TchiYuan · Accepted Answer · 2014-06-06 14:31:23Z

0

Perhaps use ng-show or ng-hide ?

<strong ng-show="truthy_condition"></strong>

answered Jun 6, 2014 at 14:31

TchiYuan

4,2985 gold badges32 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to apply if else in html using angular

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related