Angular help needed for a scenario

[MegaPowerRockstar]

In html, i have an attribute that i want to be present or deleted based on a flag.

ex:
html tag: <p class="tip" cust-attr="{{vm.propertyValue}}"><span>{{vm.labelText}}</span></p>
flag: vm.display

The above should be transformed to, if:

1. vm.display === true then <p class="tip" cust-attr="{{vm.propertyValue}}"><span>{{vm.labelText}}</span></p>
2. vm.display === false then <p class="tip"><span>{{vm.labelText}}</span></p>

I tried below option but did not work, because my attribute has - in between
<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

 

I want to do that at html level, not in angular js.

 

what do you think ?

[JAMBALHOT_RAJA]

Did you try ngIf ?

[MegaPowerRockstar]

i can't use ng-if, there are sub-sections in the above tag. let me edit it.

[pandit]

I cannot think of other option. ng-if should be your best bet. 

 

[pahelwan]

49 minutes ago, MegaPowerRockstar said:

In html, i have an attribute that i want to be present or deleted based on a flag.

ex:
html tag: <p class="tip" cust-attr="{{vm.propertyValue}}"><span>{{vm.labelText}}</span></p>
flag: vm.display

The above should be transformed to, if:

1. vm.display === true then <p class="tip" cust-attr="{{vm.propertyValue}}"><span>{{vm.labelText}}</span></p>
2. vm.display === false then <p class="tip"><span>{{vm.labelText}}</span></p>

I tried below option but did not work, because my attribute has - in between
<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

 

I want to do that at html level, not in angular js.

 

what do you think ?

I would use both p tags one with ng-show true and another with no-show false. 

[stockdazzler]

try ng-if or ng-show or write your own function.

  asalu nuvvu emi cheyyali anukuntnnavo naku ardam kale.  the above should be transformed to ani oka 2 lines of code rasav.  I tried ani cheppi totally different line of code rasav.

[Symo]

15 minutes ago, pahelwan said:

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

Why can't use something like this?

<h1 contenteditable="{{isTrue ?  value :  undefined}}">{{content.title}}</h1>

or try this

<h1 ng-attr-contenteditable="{{isTrue}}">{{content.title}}</h1>

Edited August 8, 2018 by Symo
updating answer

[subbusahusatya]

<p class="tip" cust-attr="vm.display === true ? {{vm.propertyValue}} : {{}}"><span>{{vm.labelText}}</span></p>