How to apply ternary operator using JSON data on html - angularjs

Question

I have a JSON data which is something like:

$scope.user = {
     is_session_id: true,
     session_id: 'asdasdadssa',
     email     : '[email protected]'
}

Now, I want to assign session_id when 'is_session_by' is true, and email when is_session_by is false\null. The value is to be assigned to id of a div

<div id="{{ user.is_session_id}}  ?  {{  user.session_id }} : {{ user.email  }} " ></div>

I am making some silly mistake. please help

Its coming out like this when checked via "Inspect element":

<li ng-click="selectUser(user,$index)" 
  class="left clearfix ng-scope selected" 
  ng-class="{selected: selected_user.email === user.email}" 
  ng-repeat="user in user_list" 
  id="true  ?  asdasdadssa : [email protected]">

  SOMETHING

 </li>

Don't use three mustaches {{ }}. Enclose the entire expression in one set of double curly brackets {{ }}. See AngularJS Developer Guide - Expressions. — georgeawg
– georgeawg, Commented Mar 8, 2017 at 19:40

Carlos Arauz · Accepted Answer · 2017-03-08 18:58:41Z

2

This is the code you need.

<div ng-attr-id="{{ user.is_session_by ? user.session_id : user.email  }}" ></div>

answered Mar 8, 2017 at 18:58

Carlos Arauz

8056 silver badges8 bronze badges

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

Comments

Akash KC · Accepted Answer · 2017-03-08 18:58:32Z

2

You could use ng-attr-id which parses your expression :

<div ng-attr-id="{{ user.is_session_id  ?   user.session_id  :  user.email  }} " ></div>

answered Mar 8, 2017 at 18:58

Akash KC

16.4k6 gold badges41 silver badges59 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2017-03-08 18:58:43Z

2

use ng-attr-id t assign id with condition

<div  ng-attr-id="{{ user.is_session_id  ?   user.session_id :  user.email  }} " ></div>

answered Mar 8, 2017 at 18:58

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Gaurav Kumar Singh · Accepted Answer · 2017-03-08 19:04:47Z

1

This is simple and recommended for your problem

<div ng-attr-id="{{ user.session_id || user.email  }} " ></div>

No need a extra variable user.isSession_id

answered Mar 8, 2017 at 19:04

Gaurav Kumar Singh

1,5703 gold badges11 silver badges31 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2017-03-08 19:07:06Z

-1

Why you need this way if simple one is there.

In the controller :

 var user = {
         is_session_by: true,
         session_id: 'asdasdadssa',
         email     : '[email protected]'
    }

$scope.result = user.is_session_by  ?   user.session_id  :  user.email

In the html :

<div id="{{result}}" >{{result}}</div>

answered Mar 8, 2017 at 19:07

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

5 Comments

Akash KC Over a year ago

I think, there is no need of adding extra property in $scope when ng-attr-id can itself parse the expression

RIYAJ KHAN Over a year ago

Its not about adding extra property.Its more about code readability,maintainability, testability.

RIYAJ KHAN Over a year ago

@AkashKC anyway, you evalute it via {{}} ,it will take compilation time and same memory.

RIYAJ KHAN Over a year ago

comment please.

Akash KC Over a year ago

@RIYAZ : I'd not done downvoting for your post. As comment, I would like to prefer ternary check in html itself rather than adding new property in $scope. As every field defined in the $scope has digest cycle which makes it dirty checking for those property in $scope. I don't want to have any dirty checking for property which can easily be computed as expression in html directive.

Collectives™ on Stack Overflow

How to apply ternary operator using JSON data on html - angularjs

5 Answers 5

Comments

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related