Conditionally adding data-attribute in Angular directive template

Question

I'm working on the template for a directive. If a property in the scope is set to true, data-toggle="dropdown" should be appended to the element. If the variable is false, this data attribute should not render as an attribute of the element.

For example, if scope variable is true, the template should render:

<span data-toggle="dropdown"></span>

If false, the template should render:

<span></span>

What would the template look like to accomplish this?

For example, I know that I can use ng-class to conditionally include a class. If I want the template to render this:

<span class="dropdown"></span>

Then my template would look like this:

"<span ng-class="{ 'dropdown': isDropDown }"></span>

If scope variable isDropDown is false, then the template will simply render:

<span></span>

So there's a way in a template to conditionally add a class="dropdown". Is there a syntax for templates that allows me to conditionally add data-toggle="dropdown"?

One of the things I've tried for the template is:

"<span data-toggle="{ 'dropdown': isDropDown }"></span>

My thinking with the above template is that if the scope variable isDropDown is true, the value of data-toggle will be set to "dropdown". If isDropDown is false, then the value of data-toggle would simply be an empty string "". That doesn't seem to work though.

I'm a bit confused about what are you actually asking for. Do you want to know what the directive would look like? — Wawy, Feb 26 '14 at 18:27
I realize I've done a poor job of trying to articulate my question. I've updated it the hopes that it makes more sense. I don't have the angular vocabulary yet to make more sense. — core, Feb 26 '14 at 18:34
Possible duplicate of [What is the best way to conditionally apply attributes in Angular?](http://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angular) — T J, Jan 03 '16 at 09:40

Aurelio · Accepted Answer · 2014-10-29T15:02:42.940

85

I think a good way could be to use ng-attr- followed by the expression you want to evaluate. In your case it would be something like:

<span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span>

Here's a fiddle with an example.

edited Oct 29 '14 at 15:02

answered Jul 12 '14 at 22:24

Aurelio

24,702
9
60
63

1

@LittleBigBot I might be missing your point here. Can you provide any sample code to confirm that and better explain what you mean for "general attributes"/not working "for directives"? – Aurelio Dec 19 '14 at 18:11
I tested on some directives and even with isolate scope, replace and template it still works for me, see: http://jsfiddle.net/gleezer/hrdoyz04/1/ – Aurelio Dec 19 '14 at 18:17
Yeah, you need two attributes to do it correctly for directives. But this fiddle is what I mean, you can set the to be true, false, but it will always render the directive: http://jsfiddle.net/littlebigbot/9ym6nnck/ – Belladonna Dec 19 '14 at 18:21
There are two attributes on this div: `
`
– Belladonna Dec 19 '14 at 18:35
8

`ng-attr-myattribute="{{myCondition ? '' : undefined}}"` In case you want to conditionally remove and add attribute (with empty attribute value), use this. Attribute is added if condition is true, attribute is removed if condition is false. – Petr Urban Aug 19 '15 at 16:54

score 42 · Answer 2 · answered Jun 05 '15 at 08:35

42

will produce when isTrue=true : 

and when isTrue=false : 

answered Jun 05 '15 at 08:35

Garfi

545
5
3

Thanks a lot... This works for me. I have got chance to solve my problem. It was

cha

Jul 24 '15 at 16:38

Has this behavior been changed in a particular version? It works for me. `undefined` removes the attribute. I'm using 1.5.5. – Andreas Linnert Jun 08 '16 at 13:11

The docs for this are here: https://docs.angularjs.org/guide/interpolation – Splaktar Sep 22 '16 at 06:17

Wawy · Answer 3 · 2014-02-26T21:51:37.663

At the moment, there is no angular directive that allows you to remove or add an attribute conditionally. You can do ng-switch around the span, one with that attr and another one without it.

<div ng-switch on="condition">
<span data-toggle="dropdown" ng-switch-when="value"></span>
<span ng-switch-default></span>
</div>

or

<span data-toggle="dropdown" ng-if="expression"></span>
<span ng-if="!expression"></span>

You can also create a directive for that same purpose (adding/removing attrs conditionally) but that would be a bit more complicated.

Additionally if what you want is manage the scope variable inside the directive you can pass it as another attribute.

Example:

<span data-toggle="dropdown" when="isDropDown"></span>

Conditionally adding data-attribute in Angular directive template

3 Answers3

Linked